Configure Open UI Pickers in Bloomreach Commerce Accelerator

Info: This feature in Bloomreach Content requires a standard or premium license. Contact Bloomreach for more information.

Overview

This guide describes how to configure Commerce Open UI Pickers in Bloomreach Commerce Accelerator v14 projects.

If you need to install Commerce Open UI Pickers in non-Accelerator brXM v14 or v15 projects, refer to Configure Open UI Pickers From Scratch.

Starting with version 14.3, Bloomreach Commerce Accelerator includes optional Open UI picker UIs for commerce categories, products, and accounts. These Open UI pickers provide the same capabilities as the External Document Picker Wicket plugins, but use the brX GraphQL Service for communication via GraphQL APIs.

Configure brX GraphQL Service URL

In versions 14.4.x and earlier, set the following property in each Commerce Connector document to define the brX GraphQL Service URL. The Open UI Picker plugins use this URL for GraphQL queries.

Property name	Description	Example
`apollo.server.url`	Base URL of the brX GraphQL Service	`https://api.example.com/graphql`

Starting with version 14.5, you can override this property by setting the frontend.config property on each Open UI Picker module configuration node. Use the following examples as a reference:

/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 Wicket plugins are enabled. To use the Open UI-based Category Picker instead, follow these steps:

Log in to the CMS Console (for example, http://localhost:8080/cms/console/ in your local environment).
Go to /hippo:namespaces/starterstoreboot/categorydecorator/hipposysedit:nodetype/hipposysedit:nodetype.

Add the following node. Use the YAML / YAML Import menu to import:

/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 /hippo:namespaces/starterstoreboot/categorydecorator/editor:templates/_default_.

Replace the relatedextdocselector child node. Delete the existing node and import:

/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

Save the changes to the repository.
Verify the new picker in the document editor.

Replace Product Picker UI Plugin

To replace the default Product Picker UI with the Open UI-based picker:

Log in to the CMS Console (for example, http://localhost:8080/cms/console/).
Go to /hippo:namespaces/starterstoreboot/productdecorator/hipposysedit:nodetype/hipposysedit:nodetype.

Add the following node using the YAML / YAML Import menu:

/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 /hippo:namespaces/starterstoreboot/productdecorator/editor:templates/_default_.

Replace the relatedextdocselector child node. Delete the existing node and import:

/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

Save the changes to the repository.
Verify the new picker in the document editor.

Replace Product Variant Picker UI Plugin

To replace the default Product Variant Picker UI with the Open UI-based picker:

Log in to the CMS Console (for example, http://localhost:8080/cms/console/).
Go to /hippo:namespaces/starterstoreboot/productdecorator/hipposysedit:nodetype/hipposysedit:nodetype.

Add the following node using the YAML / YAML Import menu:

/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 /hippo:namespaces/starterstoreboot/productdecorator/editor:templates/_default_.

Replace the relatedvariantselector child node. Delete the existing node and import:

/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

Save the changes to the repository.
Verify the new picker in the document editor.

Replace Account Picker UI Plugin

To replace the default Account Picker UI with the Open UI-based picker:

Log in to the CMS Console (for example, http://localhost:8080/cms/console/).
Go to /hippo:namespaces/starterstore/connectoraccountdetails/hipposysedit:nodetype/hipposysedit:nodetype.

Add the following node using the YAML / YAML Import menu:

/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 /hippo:namespaces/starterstore/connectoraccountdetails/editor:templates/_default_.

Delete the existing acctidselector node and import the following acctid node:

/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

Save the changes to the repository.
Verify the new picker in the document editor.