{"_id":"@acoustic-content/ui-extensions","_rev":"14-ccac371600d031753066cac71516a910","time":{"1.3.5":"2020-06-08T11:54:26.500Z","created":"2020-06-08T11:55:57.552Z","1.3.6":"2020-06-08T11:55:57.923Z","modified":"2022-04-04T11:14:36.042Z","1.3.7":"2020-07-28T17:03:18.619Z","1.3.8":"2021-03-29T12:15:08.716Z"},"name":"@acoustic-content/ui-extensions","dist-tags":{"latest":"1.3.8"},"versions":{"1.3.6":{"name":"@acoustic-content/ui-extensions","version":"1.3.6","description":"This module represents a Javascript library that can be used to create custom user interfaces for Elements and/or Content Types in Acoustic Content. Since custom user interfaces run within an iFrame, they can be built using any JS framework (e.g. Vanilla ","main":"dist/acoustic-content-ui-extensions.js","scripts":{"build":"node ./node_modules/.bin/webpack","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git@github.ibm.com:aipoweredmarketer/ibm-wch-sdk-ui-extensions.git"},"keywords":[],"author":"","license":"Apache-2.0","devDependencies":{"webpack":"^4.26.0","webpack-cli":"^3.1.2"},"dependencies":{"post-robot":"^9.0.3"},"gitHead":"102351daa3a2c2767e47f34d7ca6ab071ab4dad7","_id":"@acoustic-content/ui-extensions@1.3.6","_nodeVersion":"10.17.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-AZgIc9YNGazGRtvdR/8ARDS+WND59X6PwiboLqTl0GfREC7DO6FkmW1P+vXHenWqo3nSnDu1WZZt6ZkhlnF33w==","shasum":"3ba93db387d206a8baa23d03cfcf1593f22c5f62","tarball":"https://registry.npmjs.org/@acoustic-content/ui-extensions/-/ui-extensions-1.3.6.tgz","fileCount":6,"unpackedSize":176519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3idOCRA9TVsSAnZWagAA/BQP/0rpqhLUJuORgvN/o1LL\nBKEUTzoOxILFH7YIS/IgBTve2CWiwCdfkhq7GxM+zWnZDd+j61Y4sOW7wUIG\nIna6jL/pP0zDVOc2uYZmbtA1MNAWbHCtKr+5+qG7WIjNN3uoIuN06sQCq5eN\nSnR78gRLDHlyyPOqLvcXtq2/xp3TeV7p1Xw01jiF7zYbz26hHZ0NrPth4zcB\nAVESadxmvxXT54GOCXVMuL6tKJQgjmhenYt4CqCuXk0prwOkhMdsgl0L1gP+\nDsi/jLYneqvihuer1TgvUOis+l4e5QYii7zBkmExAqs5mkS4tkijRoXRJfxc\n7a6vTdkYJQTSG2IqjSQ5NkHlrWBUw4S72je3e5/S6+h5zjsCJWyZ0tPJPsC2\np8Chz/Ww+C06hv9+c18MhULeq+Td+gO54QOKhvdZr0qBRXwmLUuZ50k2Hp7/\nogKFU/u7f2uckm4dasKMTQ+JsyCT7PPI+XBYDo6+vFAHkS9HOvZmBotYzCQR\nhiemEnB3+RfK5lylmPBGyfrsCtJLki4kekmTa7uKV0uYwbUfJ2XkOUt72Q4d\ntPDV6IwrLI+HUy0OUT/ubOj7LLwiFI8qxeuSIk/xqLy73uDlV45P7Rsc0VQj\nVDq0mkNh7Nlw62T6KKFiB0gl2gQEElQACoKsferAEpvvCdWu6LAB+fCD8U7W\nh97S\r\n=IoIu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG/Q3X9zGiG2k6zIh/SSbyYNzRQ+eknXzEjEdDGg/ifLAiBM8KV1aMMaH28tsdsMpK7O7fmdotVtYekCpCfqnGQq5Q=="}]},"maintainers":[{"name":"joe.john","email":"joe.john@acoustic.com"},{"name":"pawel.galias-ac","email":"pawel.galias@acoustic.com"},{"name":"marcin.konopka-ac","email":"marcin.konopka@acoustic.com"}],"_npmUser":{"name":"pawel.galias-ac","email":"pawel.galias@acoustic.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-extensions_1.3.6_1591617357800_0.35981915142760545"},"_hasShrinkwrap":false},"1.3.7":{"name":"@acoustic-content/ui-extensions","version":"1.3.7","description":"This module represents a Javascript library that can be used to create custom user interfaces for Elements and/or Content Types in Acoustic Content. Since custom user interfaces run within an iFrame, they can be built using any JS framework (e.g. Vanilla ","main":"dist/acoustic-content-ui-extensions.js","scripts":{"build":"node ./node_modules/.bin/webpack","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git@github.ibm.com:aipoweredmarketer/ibm-wch-sdk-ui-extensions.git"},"keywords":[],"author":"","license":"Apache-2.0","devDependencies":{"webpack":"^4.26.0","webpack-cli":"^3.1.2"},"dependencies":{"post-robot":"9.0.3"},"gitHead":"4ee44372bf077acee8d0f99e88d8e4d1d6c55d2a","_id":"@acoustic-content/ui-extensions@1.3.7","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-D/oHLnAzPOhjUMZ2AM7XLbv9if/qDL7AaCCbdh2O7+G/yWzNtPVtEFDExLQj2qy9omEqMlUI8rGSvRRNxJf+WA==","shasum":"dfd1efce9bbe42dd38d91e59264e3246bdb91b02","tarball":"https://registry.npmjs.org/@acoustic-content/ui-extensions/-/ui-extensions-1.3.7.tgz","fileCount":6,"unpackedSize":122295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIFpXCRA9TVsSAnZWagAAVXoP/jEUYYgJapvWlqHPtKCz\nKcLFAz+mETQnjmXvqL+imEGvC5TANj/+IVtB6AFRIzz/A253kSklh2oWVcci\na/IcQwoCF+1bZpC1b5T/IY04WVk+wIAkinhgbKtW/tGOgSfyo6wvWgOwZDY5\n+ORPQMHyTCueruQwRSUvnJqZpMyqpLXKkTT9/wRpGfoBBpkfZk4AeH4zBZ7m\nOEeM+vu+YPN3D+Wt6vUZA6qwj/Nuzleg8E/6zOnMwFTQHTkjOwBPpD5BnMIU\nnJesXnWPqx04cl26lxgciHZ3ttqVde+PU6bP6uiujpg2qjDTG1+11HeY/C5v\nWqMhUHTVmkWtsefW1g1stwT2cTFhtqLTS49+4WOzj2sEN/4vXj7fRorPEf+z\n/+MCn+vsM+fPcFLaZPnHadx52M2GSg1pbNk7p+iaYbuuHPqyo7bKNSYyp8dF\ncefW4ydhYtUDg5fM0PyB4sszdub3LUM9KMXd92Y5C7N+jCp09cwyb1YAHVpU\nCDK0J/S4QjdN7F8MafMnATyLg30ZLmctmQnU/c+S9y22V9pumCLxR80lNJO+\ntN3lILIbUfAoNRHdhQkzD6b+s4ZeTHUaVlfxINdRimdTw7M9FGcIfEcR+OQ4\nHKkO3LTwmnwOL4Xn+fQMKg6tGWK0KrsNsfkkWBJv4rL6BOdBA8wi2dfYGBj+\nFqwC\r\n=074p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVex2UwNlobV2F9W53Ns6dHprKgfk17NuPEAwCiVThZQIhANDfd7RQoPk4GOVNoCqcQaVhVBOoaPoyL+1RzlFkOyln"}]},"maintainers":[{"email":"joe.john@acoustic.com","name":"joe.john"},{"email":"marcin.konopka@acoustic.com","name":"marcin.konopka-ac"},{"email":"mike.burati@acoustic.com","name":"mburati"},{"email":"pawel.galias@acoustic.com","name":"pawel.galias-ac"}],"_npmUser":{"name":"pawel.galias-ac","email":"pawel.galias@acoustic.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-extensions_1.3.7_1595955798471_0.6943653430691512"},"_hasShrinkwrap":false},"1.3.8":{"name":"@acoustic-content/ui-extensions","version":"1.3.8","description":"This module represents a Javascript library that can be used to create custom user interfaces for Elements and/or Content Types in Acoustic Content. Since custom user interfaces run within an iFrame, they can be built using any JS framework (e.g. Vanilla ","main":"dist/acoustic-content-ui-extensions.js","scripts":{"build":"node ./node_modules/.bin/webpack","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git@github.ibm.com:aipoweredmarketer/ibm-wch-sdk-ui-extensions.git"},"keywords":[],"author":"","license":"Apache-2.0","devDependencies":{"webpack":"^4.26.0","webpack-cli":"^3.1.2"},"dependencies":{"post-robot":"9.0.3"},"gitHead":"f1c2380eb98064ffbe9b161b3550c735a01abf3b","_id":"@acoustic-content/ui-extensions@1.3.8","_nodeVersion":"14.12.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-al3IXa3R6HGx6M7P0C4FskzM6ycp/QyAwhboI9x3nNT4+LeqQeVTLCtw0MYrZDDZGhMWhPW3wHSnnCiwv3H07Q==","shasum":"5105a643c3943fdfb43d5ade2977da990814e32e","tarball":"https://registry.npmjs.org/@acoustic-content/ui-extensions/-/ui-extensions-1.3.8.tgz","fileCount":6,"unpackedSize":121475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYcTNCRA9TVsSAnZWagAADg0P/0+AXLppYNdkLbdzOEq6\n4Oy2qE7j7clFCR0d3B/19WDLE82ggaG/E8Mmweymgm6zOnuSukAoAryP0FOL\nfrToUl2GvZPOMfRflHlviP1/qqLtDTmhBvIiH7IdSuj8FLWo9BOjE1li6A5U\n7ezNg7mAGkNdU3eh/dpBSXJyMtn4AP26DgxL8hIAdoXHMbsX+SULBp6A6k17\n3Iv0JZZh+QWdAqS885yIYEgRx3YjAbhUmW1DI/ChsnkH2oyNM+epYeFRcf9L\nYoSDax+/p97jcGOvO+LMf2eqxxE8XYJUhjF2D9Be9WKK2/dbJtNPKp8hqThs\nwHX7x6AyAkAY89kMlQCSjUamLdJt4aeV6SqgaXLqAMz2MsM1Il9xZfQCs679\neeEPe0+s5D8bCXrtxQTrhxzlE4ZIGlfU9PO4Kq7yBikMBzHj2MRk5lqF2AI5\nHu2K6mT7M3FyXg3ovG9PW6w9kanmYMehz2hGQ1btXwfaGDRRRDo4y5zT+rtW\nPS97QpYsgp0bcArQokAKq/M2cnU0f2dbmRanBlG9SVcK60iRA0ls+PYdT9y1\nNcmwQBs8FMqqwWFxMQegh5TFMnQja9XB4gILmoSin6KbPukYf/T0UWZ4JODQ\nPwh8qL13+X0QpZ7VJxxj8kBZedK0heQKSbMwLpoSSR63jVcUk6cIOKUd6p0P\n/3kM\r\n=6PcY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCvzzOZRxLw/97CGJYHzuzao2gChRXCxzvGsZML7SekQIgAJWfksoZWkYa62Ot39vnxH/sgJT9H+RCxUHxKZMomuk="}]},"_npmUser":{"name":"marcin-pasiewicz","email":"marcin.pasiewicz@gmail.com"},"directories":{},"maintainers":[{"name":"marcin-pasiewicz","email":"marcin.pasiewicz@gmail.com"},{"name":"nikodem.graczewski.acoustic","email":"nikodem.graczewski@acoustic.co"},{"name":"willizard","email":"William.Izard@acoustic.com"},{"name":"marcin.konopka-ac","email":"marcin.konopka@acoustic.com"},{"name":"pawel.galias-ac","email":"pawel.galias@acoustic.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-extensions_1.3.8_1617020108545_0.6563345228116166"},"_hasShrinkwrap":false}},"maintainers":[{"email":"William.Izard@acoustic.com","name":"willizard"},{"email":"nikodem.graczewski@acoustic.co","name":"nikodem.graczewski.acoustic"},{"email":"marcin.pasiewicz@gmail.com","name":"marcin-pasiewicz"}],"description":"This module represents a Javascript library that can be used to create custom user interfaces for Elements and/or Content Types in Acoustic Content. Since custom user interfaces run within an iFrame, they can be built using any JS framework (e.g. Vanilla ","keywords":[],"repository":{"type":"git","url":"git@github.ibm.com:aipoweredmarketer/ibm-wch-sdk-ui-extensions.git"},"license":"Apache-2.0","readme":"\n# @acoustic-content/ui-extensions\n\nThis module represents a Javascript library that can be used to create custom user interfaces for Elements and/or Content Types in Acoustic Content. Since Custom User Interfaces run within an iFrame, they can be built using any JS framework (e.g. Vanilla JS, JQuery, AngularJS, etc...).\n\n## Usage\n\nThis library depends on [post-robot](https://github.com/krakenjs/post-robot) to enable cross domain messaging. You can use either of the following methods to get started writing your own UI extension:\n\n#### Option 1: Add the following script tag to your Custom User Interfaces HTML file:\n```html\n<script src=\"https://content-eu.goacoustic.com/auth/acoustic-content-ui-extensions.js\"></script>\n```\n\nor\n\n```html\n<script src=\"https://content-us.goacoustic.com/auth/acoustic-content-ui-extensions.js\"></script>\n```\n\n**NOTE:** For Acoustic Content developers - If testing UI extensions on an internal environment, the above URL should be modified to point to the correct domain:\n\n```html\n<script src=\"https://<Acoustic Content Domain>/auth/acoustic-content-ui-extensions.js\"></script>\n```\n\n#### Option 2: Install the library as a node module through npm:\n```bash\nnpm install --save @acoustic-content/ui-extensions\n```\n\n## Examples\n\nSome open source examples of Custom User Interfaces:\n\n- [Dropdown selection of songs from iTunes API](https://github.com/acoustic-content-samples/sample-custom-element-ui/tree/master/sample-ui-extension-dropdown)\n- [Category selection from a custom taxonomy](https://github.com/acoustic-content-samples/sample-custom-element-ui/tree/master/sample-ui-extension-category)\n- [Color element](https://github.com/acoustic-content-samples/sample-custom-element-ui/tree/master/sample-ui-extension-colorpicker)\n- [Google map location selection](https://github.com/acoustic-content-samples/sample-custom-element-ui/tree/master/sample-ui-extension-map)\n- [Custom rich text editor](https://github.com/acoustic-content-samples/sample-custom-element-ui/tree/master/sample-ui-extension-rte)\n- [Email element](https://github.com/acoustic-content-samples/sample-custom-element-ui/tree/master/sample-ui-extension-email)\n- [HTML editor on a file asset](https://github.com/acoustic-content-samples/sample-custom-element-ui/tree/master/sample-ui-extension-htmleditorv2)\n- [HTML editor on a text element](https://github.com/acoustic-content-samples/sample-custom-element-ui/tree/master/sample-ui-extension-htmleditorv1)\n\n## Creating your own Custom User Interface\n\nOnce the library has been added to your desired project, you will be able to access the variable `wchUIExt` which allows the extension to communicate with the Acoustic Content UI.\n\n## Methods\n\n### How to set element(s)\n\nIn order for the extension to set the JSON of an element, use the `setElement` and/or `setElements` methods. A more thorough list of the possible element types and corresponding JSON can be found here: https://developer.goacoustic.com/acoustic-content/docs/acoustic-content/ .\n\n```javascript\n// Set values for different element types\n\n// Text Element\nwchUIExt.setElement(\n    {\n        elementType: \"text\",\n        value: \"Some text goes here\"\n    }\n);\n\n// Location Element\nwchUIExt.setElement(\n    {\n        elementType: \"location\",\n        latitude: 0.000000,\n        longitude: 0.00000\n    }\n);\n```\n\nCustom User Interfaces can also be applied to a `custom element` or a `content type`.\n\n__NOTE:__ When setting the value of a Custom User Interface that is applied on a `custom element`, please remember to set the `typeRef` field as well. This can be retrieved from `getDefinition()` (refer to the example below).\n\nFor example, a map that stores a selected location:\n\n```javascript\n// Set value for a CUSTOM ELEMENT that has a Custom User Interface applied with a location element\n\nwchUIExt.getDefinition().then(definition => {\n    wchUIExt.setElement({\n        elementType: \"group\",\n        typeRef: definition.typeRef,\n        value: {\n            \"locationElementKey\": {\n                elementType: \"location\",\n                latitude: 0.000000,\n                longitude: 0.00000\n            }\n        }\n    });\n});\n```\n\n```javascript\n// Set value for a CONTENT TYPE that has a Custom User Interface applied with a location element\n\nwchUIExt.setElement({\n    \"locationElementKey\": {\n        elementType: \"location\",\n        latitude: 0.000000,\n        longitude: 0.00000\n    }\n});\n```\n\nThis behaviour can be extended to enable multiple fields to be encapsulated by the Custom User Interface. You can do this by calling the methods `setElements` and `getElements`.\n\nFor example, a map that stores both the location coordinates and country as a location and text element respectively:\n\n```javascript\n// Set value for a CUSTOM ELEMENT that has a Custom User Interface applied with location and text elements\n\nwchUIExt.getDefinition().then(definition => {\n    wchUIExt.setElements({\n        elementType: \"group\",\n        typeRef: definition.typeRef,\n        value: {\n            \"locationElementKey\": {\n                elementType: \"location\",\n                latitude: 0.000000,\n                longitude: 0.00000\n            },\n            \"textElementKey\": {\n                elementType: \"text\",\n                value: \"Australia\"\n            }\n        }\n    });\n});\n```\n\n```javascript\n// Set value for a CONTENT TYPE that has a Custom User Interface applied with location and text elements\n\nwchUIExt.setElements({\n    \"locationElementKey\": {\n        elementType: \"location\",\n        latitude: 0.000000,\n        longitude: 0.00000\n    },\n    \"textElementKey\": {\n        elementType: \"text\",\n        value: \"Australia\"\n    }\n});\n```\n\n### How to get element(s)\n\nTo get the element JSON of the elements that have been set using the `setElement` and/or `setElements` methods, you can use the `getElement` and/or `getElements` methods. These methods are used to prepopulate fields for saving drafts and for displaying the set values once a piece of content has been published.\n\n```javascript\n// Get the text value that has been set\n\nwchUIExt.getElement().then(element => {\n    if (element.value) {\n        // Do something with this value\n    }\n});\n```\n\n```javascript\n// Get value for a CUSTOM ELEMENT that has a Custom User Interface applied with a location element\n\nwchUIExt.getElement().then(element => {\n    if (element.value[\"locationKey\"].longitude && element.value[\"locationKey\"].latitude) {\n        // Do something with this value\n    }\n});\n```\n\n```javascript\n// Get value for a CONTENT TYPE that has a Custom User Interface applied with a location element\n\nwchUIExt.getElement().then(element => {\n    if (element[\"locationKey\"].longitude && element[\"locationKey\"].latitude) {\n        // Do something with this value\n    }\n});\n```\n\nIf the user decideds to enable multiple fields to be encapsulated by the Custom User Interface, they will either have to set the custom user interface on the `Content Type` or a `Custom Element`. You can then retrieve the values for each element using `getElements()`.\n\n__NOTE:__ If you are applying the Custom User Interface on a `Content Type` or `Custom Element` with multiple elements, then it is your responsiblity to implement the UI for each of these elements.\n\n```javascript\n// Get value for a CUSTOM ELEMENT that has a Custom User Interface applied with a location element AND text element\n\nwchUIExt.getElements().then(element => {\n    if (element.value[\"locationKey\"].longitude && element.value[\"locationKey\"].latitude) {\n        // Do something with this value\n    }\n    if (element.value[\"textElementKey\"].value) {\n        // Do something with the text value\n    }\n});\n```\n\n```javascript\n// Get value for a CONTENT TYPE that has a Custom User Interface applied with a location element AND text element\n\nwchUIExt.getElements().then(element => {\n    if (element[\"locationKey\"].longitude && element[\"locationKey\"].latitude) {\n        // Do something with this value\n    }\n    if (element[\"textElementKey\"].value) {\n        // Do something with the text value\n    }\n});\n```\n\n### How to get the full content\n\nThe content JSON provides information about the parent content item. This allows the element to know the properties and definitions of other elements in the content as well as metadata about the content itself. An extract of a sample content JSON is as follows:\n\n```javascript\n{\n    id: \"925d1454-167b-431b-a54c-6cbf0354398d\",\n    rev: \"25-2ba981d0661c3129c31cc4993e569e3f\",\n    name: \"Sample Content\",\n    description: \"An example description of the sample content\",\n    typeId: \"b0798e67-3da2-48b4-b044-016495fa3ead\",\n    type: \"Article\",\n    lastModified: \"2016-11-02T06:28:47Z\",\n    lastModifierId: \"63b800fa-51a7-4602-8cbe-ab3b9cee28b9\",\n    lastModifier: \"Thomas Watson\",\n    created: \"2016-11-02T06:28:47Z\",\n    creatorId: \"8c622bbb-5f5b-45d4-89e1-fce1c054138f\",\n    creator: \"Thomas Watson\",\n    elements: {\n        datekey: {\n            elementType: \"datetime\",\n            value: \"2016-11-07T10:09:00Z\"\n        },\n        textkey: {\n            elementType: \"text\",\n            value: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua\"\n        },\n    },\n    tags: [\n        \"news\",\n        \"sample\"\n    ],\n    links: {\n        self: {\n            href: \"/authoring/v1/content/925d1454-167b-431b-a54c-6cbf0354398d\"\n        },\n        linkedDoc: {\n            href: \"/authoring/v1/content/fd95f9a53edd5c2ae4ebdf2ba464a0f9\"\n        }\n    }\n}\n```\n\n```javascript\nwchUIExt.getContent().then(content => {\n    // Your code\n});\n```\n\n\n### How to get the element definition\n\nThe definition of an element provides information about the properties of the element. A sample text element definition is as follows:\n\n```javascript\n{\n    elementType: \"text\",\n    label: \"text\",\n    key: \"text\",\n    required: true,\n    minLength: 1,\n    disabled: false\n}\n```\n\n```javascript\nwchUIExt.getDefinition().then(definition => {\n    // Your code\n});\n```\n\nThe `key` is a unique identifier of the given element and can be used to distinguish elements when getting/setting multiple elements. The `disabled` field is set to `true` if the content has been `published` and set to `false` if the content is still a `draft`. You can use this field in order to display a different view for `published` content (e.g. disabled text input field).\n\n### How to get the content metadata\n\nThe content metadata provides information about the properties of the content that the element is a part of. A sample content metadata is as follows:\n\n```javascript\n{\n    id: \"3e1a8bf6-ad09-4d38-a0b2-9875924dff44\",\n    name: \"Content Name\",\n    status: \"draft\"\n}\n```\n\n```javascript\nwchUIExt.getContentMetadata().then(contentMetadata => {\n    // Your code\n});\n```\n\nThe `id` and `name` identify the content that the element which the ui-extension is applied to. The `status` refers to the current status of the content (e.g. `draft`, `published`).\n\n### How to set iFrame height\n\nSince the Custom User Interface is displayed in the UI within an iFrame, it is important to set the desired height of this iFrame. E.g. dropdowns can have a shorter height set as default (100) and a taller height set when the dropdown is toggled open. The integer values are in `pixels`.\n\n```javascript\n// Function to open dropdwon\n\nfunction open() {\n    // Code to trigger opening dropdown\n    wchUIExt.requestResizeFrame(400);\n}\n\n// Function to close dropdown\n\nfunction close() {\n    // Code to trigger closing dropdwon\n    wchUIExt.requestResizeFrame(100);\n}\n```\n\n### How to control validation of an element\n\nThe Custom User Interface can control what determines a valid entry. If the entry is invalid, a warning will be shown in the UI, and the content cannot be published.\n\nFor example, an email Custom User Interface would be based on a text element. The text element allows any text to be stored for the email address, but the Custom User Interface does not allow content to be published if the email address is not valid - eg., it does not contain an @ symbol\n\nIn order to declare whether the value entered in the Custom User Interface is valid, you can use the `setValid` method. The following are several use cases for the validate method:\n\n```javascript\n// Declare the element to be valid\nwchUIExt.setValid(true);\n\n// Declare the element to be invalid but don't show the invalidation message in the UI\nwchUIExt.setValid(false, false);\n\n// Declare the element to be invalid and show a custom invalidation message in the UI\nwchUIExt.setValid(false, true, \"The input value is an invalid value\");\n```\n\n### How to get the tenant configuration\n\nThe tenant configuration provides details such as the `tenantId` and all other relevant URL endpoints. A sample tenant config is as follows:\n\n```javascript\n{\n    tenantId: \"3e1a8bf6-ad09-4d38-a0b2-9875924dff44\",\n    apiUrl: \"https://content-YY-X.content-cms.com/api/XXX\",\n    resourceUrl: \"https://content-YY-X.content-cms.com/api/XXX\",\n    host: \"content-YY-X.content-cms.com\"\n}\n```\n\nwhere YY is **eu** or **us**\n\n```javascript\nwchUIExt.getTenantConfig().then(tenantConfig => {\n    // Your code\n});\n```\n\n### How to get the current user information\n\nThe user object provides information such as the `user-id`, `roles` and `external-id`. A sample user object is as follows:\n\n```javascript\n{\n    externalId: \"user@email.com\",\n    displayName: \"User_Name\",\n    roles: [\"admin\"],\n    id: \"XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\"\n}\n```\n\n```javascript\nwchUIExt.getUser().then(user => {\n    // Your code\n});\n```\n\n### How to get the UI locale\n\nThe UI locale provides the current UI Locale of Acoustic Content. A sample UI Locale is as follows:\n\n```javascript\nen-US\n```\n\n```javascript\nwchUIExt.getCurrentLocale().then(locale => {\n    // Your code\n});\n```\n\n## Events\n\nWe support the ability to add a listener to events within the content form. Currently this support extends to `content updates` and `element validations`.\n\nA user can subscribe to an event through the `on()` method. This method takes in the _name of the event_ that you want to subscribe to and the _callback method_ to execute when the event gets triggered. Currently the supported list of event names are:\n1. `contentUpdate`\n2. `validate`\n\n### Subscribing to content updates\n\nThis event will trigger when a content update has occured. The user can then make a request in order to get the updated content by calling `getContent()`. \n\n```javascript\nwchUIExt.on(\"contentUpdate\", () => {\n    // This callback will get triggered when content gets updated\n\n    // User can then get the updated content\n    wchUIExt.getContent().then(content => {\n        console.log(content);\n    });\n});\n```\n\n### Subscribing to element validate\n\nThis event will trigger when a validation check has been made on the content item. The user can then set the validation based on the users own validation checks in their `custom user interface`.\n\n```javascript\nwchUIExt.on(\"validate\", () => {\n    // This callback will get triggered when validation check is done on the content item\n\n    // User can then set validation\n    wchUIExt.setValid(true);\n});\n```\n\n\n[back to top](#acoustic-contentui-extensions)\n","readmeFilename":"README.md"}