Hide and Show an Element Using a Constant

A dpendency developer may include an element in an app and allow you to hide or show the element using an extendable constant. You can overwrite the default values to change the behavior as needed, to set its value to a static value, another constant, a variable, or an expression.

To overwrite the default value of a constant to hide or show an element:

  1. Open the page in the Page Designer, and then open the Constants tab in the page's Properties pane.

    Editable constants used in the page are listed in the Constants tab:



  2. In the Constants tab, click the constant you want to edit to see its details in the Properties pane.
  3. Set the value of the constant in the Properties pane.

    In this example, the dependency developer provided a description telling you that you can use the constant to show or hide the Eloqua profiler element. The Properties pane also shows where the constant is defined (in the Digital Sales dependency) and a Value field.

    The constant showEloquaProfiler is a Boolean constant and takes either "true" or "false" as a value. If you don't want to display the Eloqua profiler in your app, you can hide it by selecting "false" in the menu.



    Rather than setting the constant to a static value of "true" or "false", you may instead choose to use another constant or variable in the app to set this value. For example, suppose you want to show this card on mobile devices only. In that case, you can use the $responsive.smOnly system variable to set the value of your constant. On mobile devices where the $responsive.smOnly value is true, the showEloquaProfiler value is set to "true" and the Eloqua profiler is displayed. On desktops where the variable is false, it is hidden.

    You also have the option to set a constant based on the value of an expression that you create. The expression can include constants and variables as well. Using the previous example, if you instead want to hide the Eloqua profiler on mobile devices, you can create a simple expression using the $responsive.smOnly variable with the Not operator (!$responsive.smOnly).

    Note:

    Make sure the value you enter matches the type of the constant: text for a string constant, "true" or "false" for a Boolean constant, and so on. The Page Designer does not validate the value or expression you enter and you may experience problems during runtime if the type doesn't match.

You can also change the value of page-scoped constants and variables in the page's Variables tab. The Constants tab in the Page Designer lists all editable constants used in the page; the page's Variables tab lists all constants defined in the page, including those that are not currently in use.