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?
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.