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
            Show Attachments on a New Tab on the Displays Detail Page

            You are here:

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

            Show Attachments on a New Tab on the Displays Detail Page

            Add a tab in the Display master detail dialog in Visual Studio Code base Modeler. Create a MediaList UI control in the tabbed area to show the list of synced attachments.

            Required Editions

            Available in: Lightning Experience

            Available in: Enterprise and Unlimited Editions where Consumer Goods Cloud is enabled
            User Permissions Needed
            To add a tab and the MediaList UI control

            Developer, Customizer
            1. To add a tab, in Visual Studio Code base Modeler, in MyDisplay_DisplayDetailsUI.userinterface.xml, change the SectionPattern attribute of the detailSection to TabbedViewAreaSection. Then, add an Area node as the first sub element of the detail section. This area defines the tabs to be displayed.

              The tabArea section in this code snippet defines a tab selector with two tabs: detailArea and Attachments. Each tab has bindings for an image and a label, with default values and a one-time binding mode to ensure they're set correctly when the tab is initialized.

              <Area areaName="tabArea" areaPattern="TabElementArea">
   <TabSelector name="TabSelector">
      <Items>
         <Tab tabName="detailArea">
            <Bindings>
               <Resource target="image" type="Image" id="MainGrey24" defaultImage="MainGrey24" bindingMode="ONE_TIME" />
               <Resource target="text" type="Label" id="MainId" defaultLabel="Main" bindingMode="ONE_TIME" />
            </Bindings>
         </Tab>
         <Tab tabName="Attachments">
            <Bindings>
               <Resource target="image" type="Image" id="ClipGrey24" defaultImage="ClipGrey24" bindingMode="ONE_TIME" />
               <Resource target="text" type="Label" id="AttachmentsId" defaultLabel="Attachments" bindingMode="ONE_TIME" />
            </Bindings>
         </Tab>
      </Items>
      <Events/>
   </TabSelector>
</Area>
            2. Create a new area as the last element of the detail section. 
              <Area areaName="Attachments" areaPattern="SingleElementArea" lazyLoading="true"> </Area>
            3. Configure MediaListControl to show the attachments
              1. In the new Attachments area implement the MediListControl with the relevant bindings:

                The MediaListControl named PromotionAttachment is bound to the loAttachment.Items[] data source from the ProcessContext::CurrentDisplay. It includes one-way bindings for the media path, description, and type, ensuring that these properties are displayed correctly in the control.

                <MediaListControl name="PromotionAttachment" dataSource="ProcessContext::CurrentDisplay.loAttachment.Items[]">
   <Bindings>
      <Binding target="MediaPath" type="Text" binding=".mediaPath" bindingMode="ONE_WAY" />
      <Binding target="IsTagged" type="Text" bindingMode="ONE_WAY" />
      <Binding target="Description" type="Text" binding=".description" bindingMode="ONE_WAY" />
      <Binding target="Type" type="Text" binding=".type" bindingMode="ONE_WAY" />
   </Bindings>
</MediaListControl>

                The detailSection of this code snippet contains a tab selector with two tabs: detailArea and Attachments. The Attachments tab includes a MediaListControl named PromotionAttachment that binds to the loAttachment.Items[] data source, and shows the media path, description, and type with one-way bindings.

                <Section sectionName="detailSection" sectionPattern="TabbedViewAreaSection">
<Area areaName="tabArea" areaPattern="TabElementArea">
   <TabSelector name="TabSelector">
      <Items>
         <Tab tabName="detailArea">
            <Bindings>
               <Resource target="image" type="Image" id="MainGrey24" defaultImage="MainGrey24" bindingMode="ONE_TIME" />
               <Resource target="text" type="Label" id="MainId" defaultLabel="Main" bindingMode="ONE_TIME" />
            </Bindings>
         </Tab>
         <Tab tabName="Attachments">
            <Bindings>
               <Resource target="image" type="Image" id="ClipGrey24" defaultImage="ClipGrey24" bindingMode="ONE_TIME" />
               <Resource target="text" type="Label" id="AttachmentsId" defaultLabel="Attachments" bindingMode="ONE_TIME" />
            </Bindings>
         </ Tab>
      </Items>
      < Events/>
</TabSelector>
</Area>
<Area areaName="detailArea" areaPattern="GroupedElementsArea">
      </Area>
      <Area areaName="Attachments" areaPattern="SingleElementArea" lazyLoading="true">
         <MediaListControl name="PromotionAttachment" dataSource="ProcessContext::CurrentDisplay.loAttachment.Items[]">
            <Bindings>
               <Binding target="MediaPath" type="Text" binding=".mediaPath" bindingMode="ONE_WAY" />
               <Binding target="IsTagged" type="Text" bindingMode="ONE_WAY" />
               <Binding target="Description" type="Text" binding=".description" bindingMode="ONE_WAY" />
               <Binding target="Type" type="Text" binding=".type" bindingMode="ONE_WAY" />
            </Bindings>
         </MediaListControl>
      </Area>
   </Section>
            4. Save all the contracts.
            5. To clean all contracts, run sf mdl cleanup.
            6. To build your contracts, run sf mdl build.
            7. To stop the back-end server and restart the simulator app, run sf mdl simulate.
            8. To test the implementation, close the incognito browser of the simulator app and restart it.

            The image attachment for one of the sample display records, Super Bowl Beer Special, in the new tab in the details page called Attachments.

             
            Loading
            Salesforce Help | Article