Loading
Feature degradation | Gmail Email delivery failureRead More
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
            Show Display Records as a Picklist

            You are here:

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

            Show Display Records as a Picklist

            Set up a picklist for the display records so that sales reps can quickly select a display type. Use Visual Studio Code based Modeler to create a domain and picklist for Display. Then, link them with a picklist mapping.

            Required Editions

            Available in: Enterprise and Unlimited Editions where Consumer Goods Cloud is enabled
            User Permissions Needed
            To add a mobile app domain CGCloud Business Admin
            To add a domain and configure picklist in VS Code Modeler Customizer, Developer
            1. Add a domain for the offline mobile app in Visual Studio (VS) Code based Modeler. Open the domain.xml contract in the $workspace/src/SharedWebData folder.
            2. Add this snippet to the Domain node. 
              <Domain name="DomDisplayType" baseType="Toggle" length="255">
  <Initializer>
    <Default value="' '" />
    <Empty value="" />
  </Initializer>
</Domain>
              Data types are defined as domains in the offline mobile app. The domain DomDisplayType is based on a toggle type and has a length of 255 characters. The initial value is a single space. If there is no value, it’s an empty string.
            3. To create a mobile app domain in Salesforce:
              1. From the App Launcher, find and select Mobile App Domain.
              2. Click New.
              3. Specify the mobile app domain name as DomDisplayType.
              4. Save your changes.
            4. To map the DomDisplayType mobile app domain to the Display picklist, create a picklist mapping.
              1. From the App Launcher, find and select Mobile App Picklist Mapping.
              2. On the Mobile App Domain page, find and select the Display record.
              3. In the Type field of the Display record, enter DomDisplayType.
              4. Save your changes.
              5. Click Extension.
              6. Set sales org 0001 for each picklist item. In Mobile App Picklist Mapping Extension, select the business area as 0001.
              7. In Text Language 1, enter the values for all the picklist items.
              8. Save your changes.
            5. To synchronize the Type attribute and make it available in the CG Cloud offline mobile app, add Type to the Mobility relevant field set.
              1. From the object management settings, click Display.
              2. On the Display object page, click Field Sets.
              3. Drop the Type attribute from the field set properties to the In the Field Set box.
              4. Save your changes.
              5. In VS Code Terminal, press CTRL+C to stop the backend server.
              6. To clear the local database, run sf mdl cleanup.
              7. To rebuild the contracts, run sf mdl build.
              8. To restart the server, run sf mdl simulate.
              9. After a successful sync, run an SQLite query to verify that the Type__c column is available in the database.
                Here’s a sample query and a screen image of the SQL query output.
                --SQLite
SELECT Id, Name, Type__c
FROM Display__c;
                The SQL query result of the database tables shows the Type__c column.
            6. Add the type attribute to data source and business object. Then add a SelectionBox picklist control for the Type field in the UI contract.
              1. Add the type attribute to DsBoMyDisplay_sf.datasource.xml.
                For example, 
                <Attribute name="type" table="Display__c" column="Type__c" />
              2. Add a simple property for the type attribute in BoMyDisplay.businessobject.xml.
                For example, 
                <SimpleProperty name="type" type="DomDisplayType" dataSourceProperty="type"/>
              3. Add a SelectionBox control for the Type attribute in MyDisplay_DisplayDetailsUI.userinterface.xml. Bind the Type SelectionBox control to the new simple property, and specify the new domain for the values to appear in the display list.
                The selection box makes it easy for sales reps to select a display type from a list of options. The SelectionBox component has bindings for the label, data source, and value. The Items section contains bindings for the values and text of each item in the selection list.
                <SelectionBox name="Type">
  <Bindings>
    <Resource target="Label" type="Label" id="DisplayType" defaultLabel="Display Type" />
    <Binding target="DataSource" toggleId="DisplayType" bindingMode="TWO_WAY" />
    <Binding target="Value" binding="ProcessContext::CurrentDisplay.type" bindingMode="TWO_WAY" />
  </Bindings>
  <Items>
    <Bindings>
      <Binding target="ItemValue" type="Text" binding=".id" bindingMode="ONE_WAY" />
      <Binding target="ItemText" type="Text" binding=".text" bindingMode="ONE_WAY" />
    </Bindings>
  </Items>
</SelectionBox>
              4. Save your changes.
            7. To test the changes, build the contracts by running this command. sf modeler workspace build.
            8. Restart the simulator app and verify the changes.
            Example
            Example

            Datasource Contract

            <DataSource name="DsBoMyDisplays" backendSystem="sf" business0bjectClass="BoMyDisplay" external="false" >
   <Attributes>
      <Attribute name="pKey" table="Display__c" column="Id" />
      <Attribute name="name" table="Display__c" column="Name" />
      <Attribute name="description" table="Display__c" column="Description__c" />
      <Attribute name="competitorDisplay" table="Display__c" column="Competitor_Display__c" />
      <Attribute name="type" table="Display__c" column="Type__c" />
   </Attributes>
   <Entities>
      <Entity name="Display__c" alias=" idAttribute="Id" />
   </Entities>
   <QueryCondition>
      <! [CDATAI
         Display__c.Id = #pKey#
      ]]>
   </QueryCondition>
   <OrderCriteria/>
   <Parameters>
      <Parameter name="pKey" type="TEXT" />
   </Parameters>
</DataSource>

            Business Object Contract

            <BusinessObject name="BoMyDisplay" schemaVersion="1.1">
    <DataSource name="DsBoMyDisplay"/>
    <SimpleProperties>
         <SimpleProperty name="pKey" type="DomPKey" dataSourceProperty="pKey"/>
         <SimpleProperty name="name" type="DomText" dataSourceProperty="name"/>
         <SimpleProperty name="description" type="DomLongDescription" dataSourceProperty="description"/>
         <SimpleProperty name="competitorDisplay" type="DomBool" dataSourceProperty="competitorDisplay"/>
         <SimpleProperty name="type" type="DomDisplayType" dataSourceProperty="type"/>
    </SimpleProperties>
    <NestedObjects/>
    <ObjectLookups/>
    <ListObjects/>
    <Methods> - </Methods>
    <Validations> - </Validations>
</BusinessObject>

            UI Contract

            Here’s a sample code that defines the display details UI with a master-detail layout. The master section contains a single-area section and the detail section uses a grouped element area with the two group elements Info and Type. The Type group element includes a selection box for choosing the display type, with options for item value and item text. There’s also a checkbox to select a competitor display.

            <UIDescription name="MyDisplay::DisplayDetailsUI" schemaVersion="0.0.0.5">
         <Page pagePattern="MasterDetailSectionPage" masterSectionFlex="40" detailSectionFlex="60">
             <PageHeader>-</PageHeader>
             <Section sectionName="masterSection" sectionPattern="SingleAreaSection">
             </Section>
             <Section sectionName="detailSection" sectionPattern="SingleAreaSection">
                  <Area areaName="detailArea" areaPattern="GroupedElementsArea">
                      <GroupElement name="Info">
                      </GroupElement>
                      <GroupElement name="Type">
                          <Bindings>
                             <Resource target="Title" type="Label" id="DisplayDetailTypeGroup" defaultLabel="Type" />
                          </Bindings>
                          <SelectionBox name="Type">
                               <Bindings>
                                   <Resource target="Label" type="Label" id="DisplayType" defaultLabel="Display Type" />
                                   <Binding target="DataSource" toggleId="DisplayType" bindingMode="TWO_WAY" />
                                   <Binding target="Value" binding="ProcessContext::CurrentDisplay.type" bindingMode="TWO_WAY"/>
                               </Bindings>
                               <Items>
                                   <Bindings>
                                       <Binding target="ItemValue" type="Text" binding=".id" bindingMode="ONE_WAY" />
                                       <Binding target="ItemText" type="Text" binding=".text" bindingMode="ONE_WAY"/>
                                   </Bindings>
                             </Items>
                          </SelectionBox>
                          <CheckBox name="CompetitorDisplay" >
                          </CheckBox>
                      </GroupElement>
                      </Area>
             </Section>
           </Page>
       </UIDescription>
             
            Loading
            Salesforce Help | Article