1. SCM (Supply Chain Management)
  2. SCM Mobile
  3. SCM Mobile App Customization
  4. Dynamically Displaying Action Buttons

Dynamically Displaying Action Buttons

Using the refreshElement() API, you can automatically display or hide Action Button elements on a mobile page or popup window. For more information about this API, see Mobile Page Element APIs.

Dynamically showing or hiding a button on a mobile page is based on an action. The action could be a click or scan that you perform on a field or table on the same page on which you want to show a button. Depending on your app requirements, you can set up these types of mobile actions for the field or table: Send to State or Restlet. You can also set up an Action Sequence type of mobile action that contains either of them as sub-actions. Within the mobile action, you can set up a refreshElement() call that references the button.

For example, you want to display a button that shows a popup window with instructions whenever you scan hazardous materials during receiving. Without reloading the mobile page, the app displays the appropriate button after you scan an item in a field. The following procedure provides the settings for this example.

To dynamically display Action Buttons:

  1. Add the buttons to the mobile page or popup window on which you want to show or hide them. When you add a button, be sure to set the following fields:

    • Type - Select Action Button.

    • Label - Select or enter a label that you want to appear in the button.

      If you want to display a button label that changes automatically, see Changing Page or Page Element Labels Using Expressions.

    • Visibility Condition - Enter an expression that controls the button's visibility based on data that may dynamically change. You can also enter a state path to a key that contains the value you want to use.

      Tip:

      If your custom RESTlet controls the button visibility, you can skip this field.

      For example, you can enter the following state key path to reference the item's name that is stored in the mobile state:

      ((state:dataRecord:scriptParams:fetchedItemname))

    For detailed instructions, see Adding Action Buttons Through Mobile Configuration for standard processes, Customizing Mobile Page Elements for custom processes, or Customizing Mobile Popup Windows.

  2. Set up an existing or new page element that captures the data you want to use to control a button's visibility. On the same Mobile - Page page within the process, set the following fields:

    • Type - Select the type of page element that you want to set up, usually a field or table element.

    • Label - Select or enter a unique label for the new page element.

    For example, you can set up the Scan/Enter Item field to capture the item's name during PO Receiving.

  3. For the field or table element, set up a mobile action that captures and processes the data.

    Depending on the page element type, you can set up mobile actions in the On Click Action, On Scan Action, or On Select Action fields. When you access the Mobile - Action page for any of these actions, do the following:

    1. Type - Select the appropriate type of mobile action that you want to set up.

      You can choose Send to State to submit and use state data. To set up your own RESTlet, choose the Restlet type. To use either or both of these types for a more complex setup, choose Action Sequence.

    2. Depending on the type you select, additional required or optional fields may appear that you can also set up.

    To view the list of action types and fields available for a page element within a standard or custom process, see Configuring Mobile Page Elements

  4. On the following subtabs of the Mobile - Action page, add parameters in which you can set up a refreshElement() call:

    Tip:

    Before you can add a parameter to a new mobile action, click Save to create the record, and then click Edit.

    • Input Parameters subtab - Set up the data source in the Key and Value fields.

      For a Send to State type of mobile action, here are sample values for the item field setup:

      - Sample Key: itemHaz - the key created to store the captured data from the item field

      - Sample Value: page:poReceiving_selectitem_scanEnterItemTxt:getValue() - standard path to the Scan/Enter Item field along with a getValue() call to obtain the captured data

      In this example, the mobile action obtains the item name value from the field on the mobile page that contains the page element. It stores the captured item name in the existing state key.

      For more information, see Input Parameters for Data Validation, Storage, or Submission.

    • Output Parameters subtab - Set up the refreshElement() call in the Response Key and Destination Key fields.

      For a Send to State type of mobile action, here are some examples:

      - Sample Response Key: response:itemHaz uses the response: keyword followed by the key specified in the corresponding input parameter

      - Sample Destination Key: page:Instructions:refreshElement() - gets the latest update for the button named, Instructions

      In this example , the Instructions button is refreshed based on the returned input data and referenced in the button's Visibility Condition expression. If the scanned item in the field is identified as a hazardous material in the backend, the Instructions button is shown.

      For more information, see Output Parameter Settings.

Related Topics

General Notices