WebParts in Tabs & Accordions where Tabs Act as Accordions in Lower Resolutions

Purpose

The purpose of this document is to highlight conversion of several WebParts added in a page to tabs which act as accordions in lower resolutions.

Requirement

Convert all WebParts in a zone to TABS

  • Default Order
  • Specific Order

Establish responsive behavior of TABS i.e. Tabs to act as accordions in lower resolutions

Implement CA theme and allow for theme customization.

Multi-browser support

Insights on Code

To convert web parts to tabs layout

To establish interactions on tab, conversion to accordion in lower resolutions

  • Custom code

Dependencies

  • JQuery library

Tested On

  • Chrome (Latest)
  • Firefox (Latest)
  • Internet Explorer 11

Code

Download the code from Github

Usage

Pre-requisite – if files are not on CDN:

Upload the below files in the site-specific documents library that you are currently working and capture its absolute URL path

  • jquery-1.11.1.min.js
  • custom-tabs.js
  • custom-tabs.css
  • tabs.js

Pre-requisite – if CDN dependencies are on CDN

Upload the below files in the site-specific documents library that you are currently working and capture its absolute URL path

  • tab.js

Creating Default Tab Order

CREATE a web part page

new page.PNG

ADD required WebParts into desired zones.

add-webparts

For instance, we’ve added

  • Page Viewer Web part
  • Image Viewer Web part

After adding the required web parts, add a content editor web part

cewp

EDIT the content editor web part and paste tabs.js URL inside the Content Link box

cewp tab config.PNG

Click OK. You’d see that all web parts will now be converted into TABS

Stop Editing to preview the page. The page would look as below

new tabs.PNG

To check Responsivity, resize your browser. Tabs Would Render as Accordions

responsive.PNG

Note: Tabs layout turns into Accordion layout below 992 pixels

The above illustrates the default behavior of the Tabs. All web parts would become tabs in a random order.

Creating Specific Tab Order

To create a specific tab order,

Edit tabs.js file in notepad

Add two forward slashes (//) before genWebpartTabs(); function as shown below

comment genWebpartTabs.png

Find “//Put 2 web parts in 2 different tabs” uncomment i.e. removed forward slashes as shown below

add titles genWebpartTabs.png
webPartTitles is an array of web part titles. As shown in the above snapshot, write the tiles of your WebParts using the following rules

  • Web part titles to be enclosed in double quotes or single quotes
  • Each web part title must be comma separated
  • The last web part title must not end with a comma after the quote

For instance, in the Default Tab Order (Previous section), we’ve created web parts in a random order. Currently the order is as below:

  1. Page Viewer
  2. Image Viewer

If you’d like to change this to

  1. Image Viewer
  2. Page viewer

Then update the script as below and save the file.
//Put 2 web parts in 2 different tabs
var webPartTitles = [“Image Viewer”,”Page Viwer”];
genWebpartTabs(webPartTitles);

Upload the file to your site’s document library and capture its absolute URL path.

Follow steps 3 to 5 as illustrated in Default Tab Order section and you’d see the tab order being changed as specified in the above mentioned snippet.

capture

Customization – Appearance

tabs.js file allows you to customize the appearance of the of the tabs which includes

  • Active Tab Color
  • Active Tab Text Color
  • Inactive Tab Color
  • Inactive Tab Text Color
  • Inactive Tab Color On Mouse Hover
  • Tab Content Background Color

These parameters are available in appearance_config object inside tabs.js file as shown below:

default color config.png

To change the appearance of the tabs, change the values inside the quotes of this object. You can also use common color names such as red, blue etc. but it is recommended to use a HEX value only.

For instance, we’d like to see

  • Active tab color as Light Blue i.e. #53bbD4
  • Active tab text color as white i.e. #FFFFFF
  • Inactive tab color as Dark Blue i.e. #22465E
  • Inactive tab text color as Middle Grey i.e. #91838B
  • Inactive tab hover color as Dark Blue i.e. #22465E
  • Tab content background color as Warm Grey i.e. #D8D8D8

To do so, update the appearance_config as below

color-config
Save and Upload the tabs.js (replace existing in the document library). The output would be as below:

capture

Limitations

  • All web parts would not be integrated into tabs cause of SharePoint specific behavior.
  • Only one instance of tabs could be used at a time in the current scenario which would be scaled further on usage scenarios.
  • Older browsers i.e. IE below 9 would require additional coding effort.

Thank you Srikar for the wonderful UI design.

Advertisements

About Joseph Velliah
As a SharePoint Developer my professional interests tend to be technical and SharePoint focused. I run a blog at "SP RIDER" where you can expect to read HOW TOs and scenarios that I run into during my day to day job. I hope my posts will give back a little to the community that is helped me.

Comments are closed.

%d bloggers like this: