Create Tab Layout for Form in Aras Innovator

This article will introduce how to create tab layout for Form like below Figure 1 and able to trigger function while clicking a tab.

Figure 1. A tab layout in Form

Figure 2. Trigger a function while clicking a tab

Create a HTML Field in Form with clicking the icon marked in Figure 3.

Figure 3. Create HTML Field

In "Field Type", paste below code to "HTML Code". And then, save Form.
The function "onClick" mainly defines the action while tab is clicked.

<script type="text/javascript">
 var tabApplet;

 clientControlsFactory.createControl("Aras.Client.Controls.Experimental.SimpleTabbar", {style: 'width: 400px; height: 200px;'}, function(control) {
  tabApplet = control;
  
  //Set tabs
  tabApplet.addTab('tab1','Tab 1');
  tabApplet.addTab('tab2','Tab 2');
  
  //Set tab content
  tabApplet._getTab('tab1').setContent('This is Tab 1.');
  tabApplet._getTab('tab2').setContent('This is Tab 2.');
  
  clientControlsFactory.on(tabApplet, {
   'onClick': onClick
  });
  
  document.getElementById('tabs-container').appendChild(tabApplet.domNode);
  
  tabApplet.startup();
 });
 
 function onClick(tabId)
 {
  var tabLabel = tabApplet.GetTabLabel(tabId);
  
  alert('"'+tabLabel+'" has been clicked!');
 }
</script>

<div id="tabs-container"></div>