BlueChips & KPIs in SharePoint | Using BootStrap, SP.JS & JQuery

[vc_row parallax=”content-moving” parallax_image=”99103″ css_animation=”fadeIn” css=”.vc_custom_1563115556985{margin-top: 0px !important;padding-top: 50px !important;padding-bottom: 50px !important;}”][vc_column width=”1/2″][vc_column_text css_animation=”fadeIn”]

Duration

~ 6 Weeks

[/vc_column_text][vc_column_text css_animation=”fadeIn”]

Client

Rolls Royce

[/vc_column_text][vc_column_text css_animation=”fadeIn”]

Used technologies

SharePoint, SP.JS, BootStrap, Html5, Css3, Jquery.

[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_single_image image=”99106″ img_size=”full” alignment=”center” style=”vc_box_shadow” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1563116280690{margin-top: 50px !important;}”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css_animation=”fadeIn”]The blue chips are corporate goals defined at the highest level and have sub goals assigned to team leader (executives).

The top management want to keep track of the monthly updates and be able to check at any time how we are doing with each Blue Chip.

A team leader can divide a blue chip into smaller tasks and delegate each task to his/her team members.

The structure of the blue chips system is a two-level hierarchy

• The Blue Chip:
  • Title,
  • Corporate Goal
  • Owner
  • Details
• Blue Chips’ Sub Goals
  • Id Blue Chip
  • Details
  • Jan (RAG)
  • Jan (Details)
  • Feb (RAG)
  • Feb (Details)
  • Mar (RAG)
  • Mar (Details)
  • ….
  • Dec (RAG)
  • Dec (Details).

Each month a sub goal responsible will update the month RAG (Red, Amber, Green), and submit comments.

A workflow triggers to update the main Blue-Chip status based on the worst RAG status.

These are the two main lists that I have created in SharePoint, on top of which, I have used Bootstrap, SP.JS and JQuery to build a nice-looking UI which[/vc_column_text][vc_column_text]

Screenshots

[/vc_column_text][vc_images_carousel images=”99110,99109,99108,99107,99106″ img_size=”full” slides_per_view=”5″ hide_pagination_control=”yes” hide_prev_next_buttons=”yes” css_animation=”lightSpeedIn”][/vc_column][/vc_row]