Tab Layout for Form in Aras Innovator

Hi All,

If  someone can help regarding Tab layout for Form like below

I tried to use code for Form Tab Layout from below link but it is not working. Is anything missing.

Create Tab Layout for Form in Aras Innovator (



  • Important! Always back up your code tree and database before applying an import package or code tree patch! Pre-requisites. Aras Innovator installed.

  • Sure. Is there any solution available for Tab View inside Form ?

  • Select TabForms in the Available for Import field. Select Type = Merge and Mode = Thorough Mode. Click Import in the top left corner. Close the Aras Package Import tool. You are now ready to login to Aras and check out the new tab form on Project.

    sky light pay card

  • I am looking for below functionality as shown below in screenshot. Tab View Inside Form.



  • Hi Pankaj

    I tried the code provided in link you mentioned but, I'm getting an error like this.addtabs load is not a function. Can you try looking at this code and check if it helps.


    copy below code to that html element

    body {font-family: Arial;}

    /* Style the tab */
    .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;

    /* Style the buttons inside the tab */
    .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;

    /* Change background color of buttons on hover */
    .tab button:hover {
    background-color: #ddd;

    /* Create an active/current tablink class */
    .tab {
    background-color: #ccc;

    /* Style the tab content */
    .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>

    <div id="London" class="tabcontent">
    <p>London is the capital city of England.</p>

    <div id="Paris" class="tabcontent">
    <p>Paris is the capital of France.</p>

    <div id="Tokyo" class="tabcontent">
    <p>Tokyo is the capital of Japan.</p>

    function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";

    // Get the element with id="defaultOpen" and click on it

    Thank You

    Gopikrishnan R

  • I tried this already but we cannot add controls. So no luck.

  • At Violet Leaf, we accept that there could be no more excellent nurturer than Mother Earth. holistic skincare