0

ICONS control top right

I use the following to hide the icons but I cannot figure out how to leave the navigation button to view.  Can this be done?

if HUD then
    html("
<style>
.hud-menu-button.menu-icon.menu-icon-trash{display: none;}
.hud-menu-button.menu-icon.menu-icon-duplicate{display: none;}
.hud-menu-button.menu-icon.menu-icon-print{display:none ;}
.hud-menu-button.menu-icon.menu-icon-add{display: none;}
.hud-menu-group, .hud-menu-right{display:none;}
</style>
")
end

I have to admit I am puzzeld by the last .hud line as it differs to the above.  Is that right?

5 replies

null
    • Sean
    • 2 yrs ago
    • Reported - view

    Alan Cooke Remove the line...

    .hud-menu-group, .hud-menu-right{display:none;}

    ...and it should work the way you want it to. The navigation buttons are also nested in a div with the class name .hud-menu-group so having it will hide both groups.

      • Alan_Cooke
      • 2 yrs ago
      • Reported - view

      Sean I tried that before and again after reading this post thus:

      if HUD then
          html("
      <style>
      .hud-menu-button.menu-icon.menu-icon-trash{display: none;}
      .hud-menu-button.menu-icon.menu-icon-duplicate{display: none;}
      .hud-menu-button.menu-icon.menu-icon-print{display:none ;}
      .hud-menu-button.menu-icon.menu-icon-add{display: none;}
      </style>
      ")
      end

      Nothing happens at all.

      In case you are wondering what HUD id:  if HUD = true then HUD := false else HUD := true end

    • Sean
    • 2 yrs ago
    • Reported - view

    These all accomplish the same goal...

    html("
    <style>
        .hud-menu-button.i-32-24.i-light-grey.i-setting-print{display:none;}
        .hud-menu-button.i-32-24.i-light-grey.i-setting-trash{display:none;}
        .hud-menu-button.i-32-24.i-light-grey.i-setting-copy{display:none;}
        .hud-menu-button.i-32-24.i-light-grey.i-setting-add{display:none;}
    </style>
    ")
    
    html("
    <style>
        .hud-menu-button[title=""Print""]{display:none;}
        .hud-menu-button[title=""Delete record""]{display:none;}
        .hud-menu-button[title=""Duplicate record""]{display:none;}
        .hud-menu-button[title=""New record""]{display:none;}
    </style>
    ")
    
    html("
    <style>
        .hud-menu-right .hud-menu-group:first-of-type{display:none;}
    </style>
    ")
    
    html("
    <style>
        .hud-menu-right > div:first-child{display:none;}
    </style>
    ")
    • Ninox developper
    • Jacques_TUR
    • 2 yrs ago
    • Reported - view

    Another way is to use the Ninox JavaScript objects. The ui.recordNavigation object gives you all the information about the record navigation buttons :

     Use NativeJS to hide or show one button : 

    var hidden := false;
    #{
        ui.recordNavigation.$add.setHidden(hidden)
    }#

    Or all buttons  : 

    var hidden := false;
    #{
        ui.recordNavigation.$actions.setHidden(hidden)
    }#

    You can also use html function :

    var hidden := true;
    html(---
    <script>ui.recordNavigation.$actions.setHidden({ hidden })</script>
    ---)

    In any case, the object is displayed whenever the hidden variable is modified. You could use it to adjust your interface according to certain parameters.
    For example, you can display buttons only if the administrator mode is activated. 

    html(---
    <script>ui.recordNavigation.$actions.setHidden({ not isAdminMode() })</script>
    ---)

    The ui.recordNavigation object also gives you access to interface functions to simulate user actions:

    This example adds a new record, just as if the user clicked the "+" button :

    #{
        ui.recordNavigation.add()
    }#

Content aside

  • Status Answered
  • 2 yrs agoLast active
  • 5Replies
  • 235Views
  • 3 Following