Retrieving data from database as list of values in SmartEdit

[Former Member]

How do we retrieve data from database as list of values for a drop down component in SmartEdit for Preview and Maintenance?

Currently we are having a requirement to have a content page maintained in different variations based on the country the customer is visiting.

For example, if a customer is visiting a site for country A they would see a page with content maintained for country A. Similar for another customer to see the same page but with different content if visiting the site for country X.

Based on this we further categorise countries into different “zones” (called content zone), e.g., country A, B and C are under zone 1, and X, Y and Z are under zone 2. The objective is to have a single page maintained with different “versions” (to have different content on the page) based on the “zone”.

In order to better comply with preview functionality in SmartEdit we would have different pages created per “zone” by using a custom type of page restriction (called zone restriction). Since users can introduce new zones on their own we want to retrieve all available zones from database and displayed as list of values when users:

• Define a “zone” restriction as a page level restriction in SmartEdit

• Select which “zone” for preview in SmartEdit

In order to do that we want to understand how we can retrieve data from database (i.e., list of available zones) in SmartEdit such that we can use this as list of values in SmartEdit for the above scenarios? Would this require using an API call to Hybris backend in SmartEdit?

See if you can help.

p.s., currently we are using version 1811.

Thanks.

Sean

[Former Member]

Hi Alejandro, we have tried the 2nd option and it works!

Thanks for your support!

[Former Member]

Hi Sean,

I hope you are doing great.

There are three options to address the issue that you are talking about:

1. Option 1: Static If you want the values in your dropdown to be static (e.g., not coming from DB) you could create an enum for your field. With that SmartEdit would take care of everything.

2. Option2: From DB - URI If you want the values to be dynamic (e.g., coming from DB) you can specify a URI to a REST service that follows the paging contract (https://help.sap.com/viewer/86dd1373053a4c2da8f9885cc9fbe55d/1811/en-US/c768c4e543274313bc13190de12a...).

      <!-- Register attribute. -->
    <bean class="de.hybris.platform.cmsfacades.types.service.impl.DefaultComponentTypeAttributeStructure"  p:typecode="PreviewData" p:qualifier="pageZone" >
                <property name="populators">
                    <set>
                        <ref bean="basicComponentTypeAttributePopulator" />
                        <ref bean="i18nComponentTypeAttributePopulator" />
                        <ref bean="pageZonesComponentTypePopulator" />
                        <ref bean="pageZoneUriPopulator" />
                    </set>
                </property>
            </bean>
    
        <!-- This field sets the structure type as "EditableDropdown". SmartEdit will render as a dropdown. -->
        <bean id="pageZonesComponentTypePopulator" class="de.hybris.platform.cmsfacades.types.populator.CmsStructureTypeComponentTypeAttributePopulator">
              <property name="cmsStructureType" value="EditableDropdown" />
        </bean>
    
        <!-- You register your URI here -->
        <bean id="pageZoneUriPopulator" class="de.hybris.platform.cmsfacades.types.populator.UriComponentTypeAttributePopulator">
            <property name="uri" value="/your_uri" />
        </bean>
   
   

   • Option 3: From DB - Custom populator This is the option to follow if you want to retrieve values from a backend that doesn't follow the paging contract or if you need to further process the values in the front end (based on your screenshot I think this is the approach you're following). This is the code that would be necessary:

   • Backend config:

        <!-- Register attribute. -->
      <bean class="de.hybris.platform.cmsfacades.types.service.impl.DefaultComponentTypeAttributeStructure"  p:typecode="PreviewData" p:qualifier="pageZone">
              <property name="populators">
                  <set>
                      <ref bean="basicComponentTypeAttributePopulator" />
                      <ref bean="i18nComponentTypeAttributePopulator" />
                      <ref bean="pageZonesComponentTypePopulator" />
                  </set>
              </property>
          </bean> 
     
      <!-- This field sets the structure type as "EditableDropdown". SmartEdit will render as a dropdown. -->
      <bean id="pageZonesComponentTypePopulator" class="de.hybris.platform.cmsfacades.types.populator.CmsStructureTypeComponentTypeAttributePopulator">
            <property name="cmsStructureType" value="EditableDropdown" />
      </bean>
     
     

• Frontend code (in typescript):

  ... @SeInjectable() export class PreviewDatapageZoneDropdownPopulator extends DropdownPopulatorInterface {

      constructor(
           public lodash: lo.LoDashStatic,
           private $q: angular.IQService,
           public languageService: LanguageService
       ) {
           super(lodash, languageService);
       }
   
       populate(payload: DropdownPopulatorPayload): angular.IPromise<GenericEditorOption[]> {
           const options = [
               {
                   id: 'zone1',
                   label: 'Zone1'
               },
               {
                   id: 'zone2',
                   label: 'Zone2'
               },
               {
                   id: 'zone3',
                   label: 'Zone3'
               }
           ];
   
           return this.$q.when(options);
       }
   }
   ... 
  
  

Note: The system is expecting Angular to have a service with the name PreviewDatapageZoneDropdownPopulator (it has to match this casing). You can register it like this in typescript

 ...
 @SeModule({
     imports: [
         ...
     ],
     providers: [
         ...
         {
             provide: 'PreviewDatapageZoneDropdownPopulator',
             useClass: PreviewDatapageZoneDropdownPopulator
         }
 
     ]
 })
 export class YourModule {}

Hope this helps, Alejandro

[Former Member]

Hi Chhunry,

Thanks for your feedback, and may we further clarify how we can (1) invoke APIs in SmartEdit, and then (2) populate the data retrieved as list of values to UI controls in SmartEdit?

For example, if you refer to the attached screenshot we would like to populate data to the new dropdown box as illustrated. In fact, what we want to achieve would be similar to other OOTB controls like "catalog" and "catalog version" on Preview dialog box?

May we understand how we can customise SmartEdit to achieve that in details?

Also, apart from dropdown box is there any OOTB UI control for textbox input field in SmartEdit?

Thanks.

Sean

[former_member740012]

Hi , i am having issue viewing the Language and product Catalog in 1905 SmartEdit drop down selector. Can someone let me know if i am missing anything.

[chhunry_pheng]

hi Sean, all data shown in SmartEdit are retrieved through APIs. That being said, there are 2 ways to get the list of available zones depending on your zone type hierarchy.

1. If the zone type extends the CMSItem type model, then you may retrieve the list of zones using the existing CMS Item Search API

2. Otherwise, you will need to expose a new API to return the list of available zones.