Configure Open UI Pickers - Bloomreach Experience - Open Source CMS

Configure Open UI Pickers

This Bloomreach Experience Manager feature requires a standard or premium license. Please contact Bloomreach for more information.

Introduction

Since v14.3, Bloomreach Commerce Accelerator provides new optional Open UI based picker UIs for commerce categories, products and accounts. These Open UI based Picker UIs provide the same functionality as provided by the existing External Document Picker based Wicket plugins, but they communicate with the new optional brX GraphQL Service via GraphQL API set instead.

Replace Category Picker UI Plugin

By default, the External Document Picker based Wicket plugins will work without any problem. However, if you want to replace the Category Picker UI Plugin with the new Open UI based Picker UI, follow the instructions below.

  • Log in to CMS Console (e.g, http://localhost:8080/cms/console/ in your local development environment).
  • Navigate to the /hippo:namespaces/starterstoreboot/categorydecorator/hipposysedit:nodetype/hipposysedit:nodetype node, and add the following node underneath. Use the YAML / YAML Import menu to import the following content:
    • /relatedextdocselector:
        jcr:primaryType: hipposysedit:field
        hipposysedit:mandatory: false
        hipposysedit:multiple: true
        hipposysedit:ordered: false
        hipposysedit:path: starterstoreboot:relatedexdocids
        hipposysedit:primary: false
        hipposysedit:type: OpenUiString
      
  • Navigate to the /hippo:namespaces/starterstoreboot/categorydecorator/editor:templates/_default_ node, and replace the relatedextdocselector child node with the following. Delete the old node and use the YAML / YAML Import menu to import the following content:
    • /relatedextdocselector:
        jcr:primaryType: frontend:plugin
        caption: Related External Category
        field: relatedextdocselector
        plugin.class: org.hippoecm.frontend.editor.plugins.field.PropertyFieldPlugin
        wicket.id: ${cluster.id}.right.item
        /cluster.options:
          jcr:primaryType: frontend:pluginconfig
          ui.extension: categoriesPicker
  • Write the changes to the repository, and verify the changes in the document editor.

Replace Product Picker UI Plugin

By default, the External Document Picker based Wicket plugins will work without any problem. However, if you want to replace the Product Picker UI Plugin, follow the instructions below.

  • Log in to CMS Console (e.g, http://localhost:8080/cms/console/ in your local development environment).
  • Navigate to the /hippo:namespaces/starterstoreboot/productdecorator/hipposysedit:nodetype/hipposysedit:nodetype node, and add the following node underneath. Use the YAML / YAML Import menu to import the following content:
    • /relatedextdocselector:
        jcr:primaryType: hipposysedit:field
        hipposysedit:mandatory: false
        hipposysedit:multiple: true
        hipposysedit:ordered: false
        hipposysedit:path: starterstoreboot:relatedexdocids
        hipposysedit:primary: false
        hipposysedit:type: OpenUiString
  • Navigate to the /hippo:namespaces/starterstoreboot/productdecorator/editor:templates/_default_ node, and replace the relatedextdocselector child node with the following. Delete the old node and use the YAML / YAML Import menu to import the following content:
    • /relatedextdocselector:
        jcr:primaryType: frontend:plugin
        caption: Related External Product
        field: relatedextdocselector
        plugin.class: org.hippoecm.frontend.editor.plugins.field.PropertyFieldPlugin
        wicket.id: ${cluster.id}.right.item
        /cluster.options:
          jcr:primaryType: frontend:pluginconfig
          ui.extension: productsPicker
  • Write the changes to the repository, and verify the changes in the document editor.

Replace Product Variant Picker UI Plugin

By default, the External Document Picker based Wicket plugins will work without any problem. However, if you want to replace the Product Variant Picker UI Plugin, follow the instructions below.

  • Log in to CMS Console (e.g, http://localhost:8080/cms/console/ in your local development environment).
  • Navigate to the /hippo:namespaces/starterstoreboot/productdecorator/hipposysedit:nodetype/hipposysedit:nodetype node, and add the following node underneath. Use the YAML / YAML Import menu to import the following content:
    • /relatedvariantselector:
        jcr:primaryType: hipposysedit:field
        hipposysedit:mandatory: false
        hipposysedit:multiple: true
        hipposysedit:ordered: false
        hipposysedit:path: starterstoreboot:relatedvariantids
        hipposysedit:primary: false
        hipposysedit:type: OpenUiString
  • Navigate to the /hippo:namespaces/starterstoreboot/productdecorator/editor:templates/_default_ node, and replace the relatedvariantselector child node with the following. Delete the old node and use the YAML / YAML Import menu to import the following content:
    • /relatedvariantselector:
        jcr:primaryType: frontend:plugin
        caption: Related External Product Variant
        field: relatedvariantselector
        plugin.class: org.hippoecm.frontend.editor.plugins.field.PropertyFieldPlugin
        wicket.id: ${cluster.id}.right.item
        /cluster.options:
          jcr:primaryType: frontend:pluginconfig
          ui.extension: productVariantsPicker
  • Write the changes to the repository, and verify the changes in the document editor.

Replace Account Picker UI Plugin

By default, the External Document Picker based Wicket plugins will work without any problem. However, if you want to replace the Account Picker UI Plugin, follow the instructions below.

  • Log in to CMS Console (e.g, http://localhost:8080/cms/console/ in your local development environment).
  • Navigate to the /hippo:namespaces/starterstore/connectoraccountdetails/hipposysedit:nodetype/hipposysedit:nodetype node, and add the following node underneath. Use the YAML / YAML Import menu to import the following content:
    • /acctid:
        jcr:primaryType: hipposysedit:field
        hipposysedit:mandatory: false
        hipposysedit:multiple: false
        hipposysedit:ordered: false
        hipposysedit:path: starterstore:acctid
        hipposysedit:primary: false
        hipposysedit:type: OpenUiString
  • Navigate to the /hippo:namespaces/starterstore/connectoraccountdetails/editor:templates/_default_ node.
  • Delete the old acctidselector node underneath and import the following acctid node instead. Use the YAML / YAML Import menu to import the following content:
    • /acctid:
        jcr:primaryType: frontend:plugin
        caption: Account ID
        field: acctid
        plugin.class: org.hippoecm.frontend.editor.plugins.field.PropertyFieldPlugin
        wicket.id: ${cluster.id}.field
        /cluster.options:
          jcr:primaryType: frontend:pluginconfig
          ui.extension: accountsPicker
  • Write the changes to the repository, and verify the changes in the document editor.
Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?