Getting the current field value can be done with
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.