Loading
Visual Studio Code Based Modeler for Consumer Goods Cloud
Table of Contents
Filter by (0)Add
Select Filters

          No results
          No results
          Here are some search tips

          Check the spelling of your keywords.
          Use more general search terms.
          Select fewer filters to broaden your search.

            Search all of Salesforce Help
            Search all of Salesforce Help
            Define the Display Card Process

            You are here:

            1. Salesforce Help
            2. Docs
            3. Visual Studio Code Based Modeler

            Define the Display Card Process

            Define the process flows such as, how to load and store data, call functions and processes, and input validation within the app

            Required Editions

            User Permissions Needed
            To customize CG Cloud offline mobile app: Customizer, Developer
            1. Identify the process contract that corresponds to a UI page. Run this command in the Chrome debugger console window: Framework.getProcessContext().__spec.name
              For the “Your Day” page, the search returns this value: Application::CockpitProcess
            2. Open Application::CockpitProcess.processflow.xml in VS Code based Modeler.
            3. Add these process variables to the process context declarations.
              • ProcessContext::CardDisplay_DataLoaded - to indicate if data is loaded
              • ProcessContext::CardDisplay_SubComponentName - to store the subcomponent name.
              The two bindings are defined in the UI contract. The prefix ProcessContext:: is a naming convention. The prefix defines that the binding variables are defined in the process context section of the process contract.
              <!-- Card: Display -->
<Declaration name="CardDisplay_DataLoaded" type="DomBool" />
<Declaration name="CardDisplay_SubComponentName" type="String" />
            4. In the VIEW action, register LoadContainerData.
              The CardDisplay_loadData event is defined in the LoadContainerData node in the UI contract. The process contract uses the CardDisplay_loadData event, to start a control flow when an event is triggered and calls the CardDisplay_loadData action.
              <!-- Card: Display-->
<Event name="CardDisplay_loadData" action="CardDisplay_loadData" />
            5. Define actions to fill the process context variables for CardDisplay_DataLoaded and CardDisplay_SubComponentName after an event is triggered.
              1. Define an action that the event directly triggers and set the data loaded flag. You can use a static message and set it directly to loaded.
              2. To call, use actionType=LOGIC and the Utils.identity function provided by the framework.
                The identity function takes the boolean input value and writes it to the CardDisplay_DataLoaded process variable.
              3. Set the TransitionTo node to call the next action CardDisplay_setSubcomponentName.
              4. Set CardDisplay_setSubcomponentName to static until you define a list.
                Note
                Note Create a list and then configure the message component to appear only if no records are available to show.
                The app shows the no data message component.
              <!-- Card: Display START-->
             <Action name="CardDisplay_loadData" actionType="LOGIC" call="Utils.identity">
                       <Parameters>
                             <Input name="value" value="1" type="Literal" />
                       </Parameters>
                       <Return name="ProcessContext::CardDisplay_DataLoaded" />
                       <TransitionTo action="CardDisplay_setSubcomponentName"/>
              </Action>
              <Action name="CardDisplay_setSubcomponentName" actionType="LOGIC" call="Utils.identity">
                     <Parameters>
                           <Input name="value" value="CardNoDataMessageUiPlugin" type="Literal" />
                     </Parameters>
                     <Return name="ProcessContext::CardDisplay_SubComponentName" />
             </Action>
<!-- Card: Display END-->
            6. Configure the Utils.identity function to write the string CardNoDataMessageUiPlugin into the process variable.
              The framework provides the Utils.identity function. The function takes the input parameter and returns it again to write it into the context variable.
            7. Save your changes.
            8. Build the contracts by running the command sf modeler workspace build or the alias command sf mdl ws build in your workspace.
            9. To test the changes, restart the simulator app.
              Switch on the device toolbar to register the clicks on the UI in the simulation mode. In Mac, launch Developer Tools and then press command+shift+M.
             
            Loading
            Salesforce Help | Article