​​​How to hide /show ribbon's buttons of a form in runtime mode?

Last Update: May 13, 2018

In this use case, you will see how to hide or show the attachments button in the form ribbon when changing the value of the vacation type control at runtime. Here are the steps on how to do that.

  1. Open the form in design mode.
  2. Add the following to the form design workspace:
    How to hide or show ribbon's buttons of a form in runtime mode1.jpg
  3. Set the Required property of the DateFrom and DateTo Date controls to ON.
  4. Set the Required property of the VacationType DropdownList control to ON.
  5. Set the Data Source of the VacationType DropdownList control to Unmapped. And in the Items property, add the following values: Annual, Sick.
  6. Set the Required property of the Attachments Panel control to ON.
  7. Set the Hidden property of the Attachments Panel to ON.
  8. Select the Form by clicking on any empty space on the form design workspace area "Canvas".
  9. In the Rules pane, click on the Add icon to add a new rule, the Rule Manager dialog will open.
    How to auto-shifting Panel control in a form2.jpg
  10. Add a new rule as follows:
    A. Change the Rule Name as desired.
    B. Change the Rule Type to Action.
    C. Change the Event Type to onLoad.
    D. In the Action section, type the following script:
         $(document.getElementById('Ribbon.FTTab.OpeartionsGrp.AttachmentsBtn-Large')).hide();
    E. Click on the Save button to save the rule.
    Note: You can use Assistance Panel to help you adding functions and related parameters, form variables and form controls to Conditions and/or Actions sections.
  11. ​​Select the VacationType control.
  12. In the Rules pane, click on the Add icon to add a new rule, the Rule Manager dialog will open.
    How to auto-shifting Panel control in a form2.jpg
  13. Add a new rule as follows:
    A. Change the Rule Name as desired.
    B. Change the Rule Type to Action.
    C. Keep the Event Type onChange
    D. In the Action section, type the following script:
         if (getLookupSelectedText(VacationType) == 'Sick')
        $(document.getElementById('Ribbon.FTTab.OpeartionsGrp.AttachmentsBtn-Large')).show();
        else
        $(document.getElementById('Ribbon.FTTab.OpeartionsGrp.AttachmentsBtn-Large')).hide();

    E. Click on the Save button to save the rule.
    Note: You can use Assistance Panel to help you adding functions and related parameters, form variables and form controls to Conditions and/or Actions sections.
  14. Test the form by publishing it and adding a new item to the list.

Note: In the above example, you have seen how to show/hide the attachments button at runtime by using [Ribbon.FTTab.OpeartionsGrp.AttachmentsBtn-Large] as a Ribbon_ID. You can apply the same scenario to other ribbon's buttons as follows:

  • For the Close Button, use the following Ribbon_ID: Ribbon.FTTab.OpeartionsGrp.CloseBtn-Large
  • For the Reload Button, use the following Ribbon_ID: Ribbon.FTTab.OpeartionsGrp.ReloadBtn-Large
  • For the Submit Button, use the following Ribbon_ID: Ribbon.FTTab.OpeartionsGrp.SaveFlyoutAnchor-Large
  • For the New Form Button, use the following Ribbon_ID: Ribbon.FTTab.OpeartionsGrp.NewFormBtn-Large
  • For the Send Message Button, use the following Ribbon_ID: Ribbon.FTTab.OpeartionsGrp.MessageBtn-Large
  • ​For the Print Preview Button, use the following Ribbon_ID: Ribbon.FTTab.RevAndPrintGrp.PrintPreviewBtn-Large

Related Resources:
These resources may not reflect the same exact case steps.
https://www.youtube.com/embed/wmq_OLHtm3g