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 (cylnote.blogspot.com)

Thanks,

Pankaj

Parents Reply Children
  • オフライン in reply to pankaj27b

    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.

    Link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs_open

    copy below code to that html element

    <style>
    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 button.active {
    background-color: #ccc;
    }

    /* Style the tab content */
    .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    }
    </style>
    <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>

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

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

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

    <script>
    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
    document.getElementById("defaultOpen").click();
    </script>

    Thank You

    Gopikrishnan R

  • オフライン in reply to Gopikrishnan

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