Configure Open UI Pickers in Bloomreach Commerce Accelerator

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

Introduction

This document is intended to help configure the Commerce Open UI Pickers in Bloomreach Commerce Accelerator v14 projects only.

If you want to install the Commerce Open UI Pickers in non-Bloomreach Commerce Accelerator brXM v14 or v15 projects from scratch, please see the Configure Open UI Pickers From Scratch page instead.

Since v14.3, Bloomreach Commerce Accelerator provides 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 optional brX GraphQL Service via GraphQL API set instead.

brX GraphQL Service URL Configuration

In v14.4.x or earlier, the following property should be set in each Commerce Connector document to specify the URL of the brX GraphQL Service, so the Open UI Picker plugins can make queries against the URL.

Property name Description Example(s)
apollo.server.url The base URL of the brX GraphQL Service. https://api.example.com/graphql

Since v14.5, the property can be overridden by setting the frontend.config property instead on each Open UI Picker module configuration nodes, like the following examples:

/hippo:configuration/hippo:frontend/cms/ui-extensions/categoriesPicker:
  jcr:primaryType: frontend:uiExtension
  # ... SNIP ...
  frontend:config: '{ "apollo.server.url": "https://api.example.com/graphql" }'
/hippo:configuration/hippo:frontend/cms/ui-extensions/productsPicker:
  jcr:primaryType: frontend:uiExtension
  # ... SNIP ...
  frontend:config: '{ "apollo.server.url": "https://api.example.com/graphql" }'
/hippo:configuration/hippo:frontend/cms/ui-extensions/productVariantsPicker:
  jcr:primaryType: frontend:uiExtension
  # ... SNIP ...
  frontend:config: '{ "apollo.server.url": "https://api.example.com/graphql" }'

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?