0

Pulsante nella barra dei TAB

I would need to insert an "Actions" button that opens a dialog where I can then put "Edit and save" buttons.
How could I create this button "Actions as shown" the button of the remain in the TAB bar

5 replies

null
    • Ninox developper
    • Jacques_TUR
    • 2 yrs ago
    • Reported - view

    Like this?

    With dialog when you click on ?

    You can try this code in Ninox + NativeJS :

    #{// put your action in this function }#;
    function doSomeThing( title : text, body : text ) do
        var res := dialog(title, body, ["modify", "save"]);
        switch res do
            case "modify" : alert("modify...")
            case "save" : alert("save...")
        end;
    end;
    
    #{:text
    // On first time, create the container and the button
    if (!ui.myContainer) {
        ui.myContainer = document.createElement('div');
        ui.myButton = document.createElement('button');
        // add the bonton in the container
        ui.myContainer.append(ui.myButton);
        // add the container in the menu bar.
        ui.$menuRight[0].insertBefore(ui.myContainer,ui.$menuRight[0].children[0]);
    }
    
    // button initialization
    ui.myButton.innerText = 'Azioni';
    // call the doSomeThing function when the button is clicked
    ui.myButton.onclick = (event) => {doSomeThing( 'my title', 'what do you whant to do ?')};
    
    }#
    • Antonello_Stabile_71
    • 2 yrs ago
    • Reported - view

    Devo mettere il tutto in un campo formula? ho provato ma non funziona

    • Antonello_Stabile_71
    • 2 yrs ago
    • Reported - view

    Ok, funziona.......grazie

    • Antonello_Stabile_71
    • 2 yrs ago
    • Reported - view

    come posso cambiare le dimensioni del pulsante "Azioni" e la sua posizione?

    • Ninox developper
    • Jacques_TUR
    • 2 yrs ago
    • Reported - view

    I had misread your document about the position of the button. I changed the code in this sense. Now the container is a child of the tab bar and not of the right menu.

    warning : this code must be executed when the form is displayed, not before.

    #{// put your action in this function }#;
    function doSomeThing( title : text, body : text ) do
        var res := dialog(title, body, ["modify", "save"]);
        switch res do
            case "modify" : alert("modify...")
            case "save" : alert("save...")
        end;
    end;
    
    #{:text
    
    // find the tab bar of top level form.
     var tabs = (widgets.popupEditorStack.length > 0 ? widgets.popupEditorStack[widgets.popupEditorStack.length - 1] : ui.sideEditor && ui.sideEditor).tabsEl[0];
    
    // if it's first time, create the container and the button
    if (!tabs.myContainer) {
        tabs.myContainer = document.createElement('div');
        tabs.myButton = document.createElement('div');
        // add the bonton in the container
        tabs.myContainer.append(tabs.myButton);
    
        // add the current container in the tab bar.
        tabs.append(tabs.myContainer);
    }
    
    // container aspect initialization
    tabs.myContainer.className = 'tab';
    tabs.myContainer.style.float = 'inline-end';
    tabs.myContainer.style.backgroundColor = '#3059f0';
    tabs.myContainer.style.color = 'white';
    tabs.myContainer.style.width = '100px';
        // button aspect initialization
    tabs.myButton.innerText = 'Azioni';
    tabs.myButton.style.textAlign = 'center';  // call the doSomeThing function when the button is clicked
    tabs.myButton.onclick = (event) => {doSomeThing( 'my title', 'what do you whant to do ?')};  }#

    To change the size of the button, you have to change the style of the container or the button itself. The same goes for the color and all other aspect attributes. Use the "style" property of the elements for this : https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information

Content aside

  • 2 yrs agoLast active
  • 5Replies
  • 81Views
  • 2 Following