OpenUI - how to save data from extension to CMS

Experience Manager (PaaS/OnPrem)
1

Hi,

I have implemented a OpenUI extension in order to include an autocomplete input text in an iframe as described in the documentation.
The autocomplete feature is working fine and I have successfully included in a document type in the CMS but I miss the last step: how can I pass the value stored in the iframe input text to the CMS document editor page?

Thanks,

Flavio

1 Like
2

Hi Flavio,

Storing a string value back into the current field can be done with

ui.document.field.setValue(value)

See https://documentation.bloomreach.com/library/concepts/open-ui/develop-a-document-field-extension.html for more details.

best,

Mathijs

1 Like
3

Thank you Mathijs,

do you know or could you please link a doc page about how to get that value in the CMS editor page and how to grab that value when the user clicks on “save”?
Thanks!

4

Getting the current field value can be done with

ui.document.field.getValue()

The documentation page in my previous reply (https://documentation.bloomreach.com/library/concepts/open-ui/develop-a-document-field-extension.html) contains a full code example at the bottom. The example is in vanilla HTML + JS, but you can use any framework you like if you want (Angular, React, Vue, …). The @bloomreach/ui-extension library ships in various module formats.

The basic idea is to first register your UI extension with UiExtension.register(), which resolves with a ‘ui’ object that provides all API to interact with the CMS. Note that all API methods return a Promise, so you have to wait for the result (e.g. either do ui.document.field.getValue().then(value => doSomethingWith(value)) or use async-await like in the example code).

Once registered, you get get the current field value (ui.document.field.getValue()), provide a UI to change it, and in some callback set the changed field value (ui.document.field.setValue(newValue)) .

Note that this is all independent of the “Save” button in the surrounding document editor. A UI extension cannot know whether a user clicked “save”. Calling setValue() will persist the new value in the draft variant of the document (or more accurately, use a throttle of 2 seconds before persisting the latest change in the draft variant). Clicking “Save” will copy all draft values in a document to the preview variant, so other (concurrent) CMS users can see the changes too.

hth,

Mathijs

1 Like
5

OK thanks Mathijs,
what I was concerned about is how data are stored in JCR; I saw that the value is stored by default as :openuistring by default but this can configured in the CMS field editor

Thank you for your help!