Ability to reference Tab by tab.title instead of tab[x]

Forms SharePoint Online
1

Use Case: We have many forms (100+) that use the Tab Control. When we use the Tab Control, there will always be 4 Tabs on every form. These tabs are called Traceability, Attachments, Training & Control.

We have a User Profile that determines if/when the User will be able to see these Tabs (i.e.: We use tabs.disabled conditionally based on User and some other factors where “x” is the Tab reference in the Tabs array). For a given User/Tab combination, the value is either true/false for all 100 + Forms. If they can see the Control Tab in one form, it is fine for them to see the Control Tab in all the forms.

For the Tab with the title “Control”, in some forms it might be tabs[6].disabled in the Tab array and in other Forms it might be tabs[8].disabled ion the Tab array. See below:

event
event785×62 2.85 KB

reqirement
reqirement1048×70 3.78 KB

We are moving all our js Form Code into an external js file and want to have just one set of conditions to disable/enable these four Tabs.
We are trying to figure out how to reference the Tab id by the title of the Tab rather than by its index in the Tab array.

So, the end result is, logically, something like tabs.[tab.title == ‘Control’].disable

This way, it does not matter where the Tab is in the Array.

2

Hey @vhancock,

If the four tabs are always at the end of the tab control and are placed in the same order, try using this:

tabs[tabs.length - 1]; // The last tab in the control
tabs[tabs.length - 2]; // The second to last tab in the control
// And so on
3

Hi @vhancock ,
I have created 4 tabs for NewForm and called the container "Tabs".
Each tab is called - Tab1, Tab2, Tab3, Tab4.

This script:

fd.spRendered(() => {
  const tabs = fd.container("Tabs").tabs;
  let tabsTitles = [];
  tabs.map((tab) => tabsTitles.push(tab._props.title));
  console.log(tabsTitles);
});

Does the iteration and return the title of the tabs, so output is

//["Tab1","Tab2","Tab3","Tab4"]

I think this could help you a bit :slight_smile:

Regards
Stepan

1 Like
4

Wow, this is brilliant!

I didn't even think of doing it this way, thank you for breathing life into the community.

@vhancock, if you need guidance on how to use this, consider doing the following:

  • Create the tabsTitles array just like @StepanS insightfully demonstrated
  • Search tabsTitles for the name of the tab you need with a simple for() loop
  • Use the resulting index to address the tab in the tabs array
2 Likes
5

Thank you Stephan. Really good stuff. Appreciate your time and insights.

1 Like
6

In case someone in the future happens upon this, here was my final code. The index.xxx variables were declared elsewhere:

fd.spRendered(() => {
const tabs = fd.container("Tabs1").tabs;
let tabsTitles = ;
tabs.map((tab) => tabsTitles.push(tab._props.title));
indexTraceability = tabsTitles.indexOf("Traceability");
indexAttachments = tabsTitles.indexOf("Attachments");
indexTraining = tabsTitles.indexOf("Training");
indexControl = tabsTitles.indexOf("Control");
});

Thanks again Stepan.

2 Likes
7

Hello @vhancock ,

thanks, in your script, you finished the script in the way you want to use it! :slight_smile:
Perfect

Glad to help you.
Stepan

1 Like