Simple Tabs in Personas

[eedens]

Personas Tabs

During the most recent SAP Personas Practitioner Forum, we saw a neat persona with a unique feature: Tabs. I'd like to demonstrate one method for adding a similar user interface to your Persona.

 

Creative Layering

The first thing that I did to get the tab look, was create a set of script buttons in the editor, and give them the nice round edges that we see in most tabs:

Initial Tabs as Buttons

I used the align and distribute tools to get the buttons in a nice straight line at the same level of the page. I also made the buttons a bit taller than I normally would, since we will be hiding the lower portion behind a series of simple containers.

A simple container is made for each button, and will function as the pages you are switching between with the tabs. Make sure that they are stacked, and not inserted into one another. I recommend making the containers the same size, since they will become the work areas for your tabbed content.

Move your containers into a position that overlaps the lower portion of your script buttons. In this image, I'm planning on using the Blue tab as my default, so I used the Blue Container to determine where I wanted the tab pages to be. Once you decided where the tab pages should be, select all of your script buttons, and change their Z Index to the back (assuming you don't have any layers already there) by using the 'Send To Back' option. This places the script buttons mostly behind the containers, and you can start to see them as tabs.

Tab Containers

Once your groups are created, use the Align Objects tool to line them up vertically and horizontally, and then hide all the containers, except for your default as seen here:

Stacked Containers

 

Scripting Portion

Now we get to the scripting portion. I'm using if/else if statements to swap visible containers and highlight the selected tab. I've included notes about each portion of the script. There's likely a much easier/prettier way of doing this, but this was a quick and dirty demo I threw together to show how it could be done. This script is assigned as an onClick execution to each of the scripting buttons that act as the tabs.

/*jshint esversion: 6*/

/*globals console, copyTableContents, document */

/* ^ I use these global variables often,

so I paste the ES6 and globals option into all my scripts.*/



//First, we set up variables. ES6 lets me use const,

//and let, but var is fine to use instead.

const redTab = session.findById("wnd[0]/usr/btnPersonas_159785349635632");

const yelTab = session.findById("wnd[0]/usr/btnPersonas_159785349040783");

const greenTab = session.findById("wnd[0]/usr/btnPersonas_159785349482669");

const blueTab = session.findById("wnd[0]/usr/btnPersonas_159785349776394");

const yellowBox = session.findById("wnd[0]/usr/subPersonas_159785141777266");

const redBox = session.findById("wnd[0]/usr/subPersonas_159785141639166");

const blueBox = session.findById("wnd[0]/usr/subPersonas_159785140679953");

const greenBox = session.findById("wnd[0]/usr/subPersonas_159785141909745");



/* I'm using an onClick script assignment, 

which allows me to grab the id of whatever, 

tab I trigger the script with. */

let tabSel = source.id;



/* This sets the background color of the selected tab,

in this case to a purple for emphasis,

but it can be used to change a number of properties,

to indicate to the user that they've selected a tab.*/

source.setProperty("backgroundColor", "rgba(188, 45, 210, 1)");



/* I'm sure there's a more elegant solution, 

but for tab switching, I'm just using an IF statement.

Based on the button selected, the coordinating,

Container is shown, while the others are hidden.

The backgroundColor of the other buttons is reset, 

as well, so the selected tab is highlighted.*/

if (tabSel == redTab.id) {

  yelTab.resetPropertyToOriginal("backgroundColor");

  greenTab.resetPropertyToOriginal("backgroundColor");

  blueTab.resetPropertyToOriginal("backgroundColor");

  redBox.show();

  yellowBox.hide();

  greenBox.hide();

  blueBox.hide();

} else if (tabSel == yelTab.id) {

  redTab.resetPropertyToOriginal("backgroundColor");

  greenTab.resetPropertyToOriginal("backgroundColor");

  blueTab.resetPropertyToOriginal("backgroundColor");

  yellowBox.show();

  redBox.hide();

  greenBox.hide();

  blueBox.hide();

} else if (tabSel == greenTab.id) {

  yelTab.resetPropertyToOriginal("backgroundColor");

  redTab.resetPropertyToOriginal("backgroundColor");

  blueTab.resetPropertyToOriginal("backgroundColor");

  greenBox.show();

  redBox.hide();

  yellowBox.hide();

  blueBox.hide();

} else if (tabSel == blueTab.id) {

  yelTab.resetPropertyToOriginal("backgroundColor");

  redTab.resetPropertyToOriginal("backgroundColor");

  greenTab.resetPropertyToOriginal("backgroundColor");

  blueBox.show();

  redBox.hide();

  yellowBox.hide();

  greenBox.hide();

}

Results

With the ID's set to the correct objects, and the script assigned, you should now have basic functioning tabs. The different containers can be used as unique views based on your use case, and filled with tab-specific controls and information.

Tab Loop