{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":4817,"path":"conversational-interfaces/virtual-agent/ccif-integrate-custom-controls.md","title":"Integrate custom controls","bundle":null,"doc_type":null,"release":"australia","body":"\n# Integrate custom controls\n\nImplement and leverage custom controls built using the custom control framework in your integration.\n\n## Before you begin\n\nRole required: virtual\\_agent\\_admin or admin\n\n## About this task\n\nMap custom controls to a provider channel.\n\n-   **Implement custom controls created in Workflow Studio**\n\n    Use the example script to implement custom controls created in Workflow Studio.\n\n    Example: Custom controls support\n\n    ```\n    {\n        uiType: \"CustomControl\",\n        group: \"DefaultCustomControl\",\n        name: \"The name of the Custom Control (sys_cs_custom_control.name)\",\n        required: true/false,\n        uxComponentDefinitionSysId: \"seismicComponentId\" // or null if not\n        isInput: true/false, // whether to wait for a response value or if just output\n        serializedControlData: \"User defined JSON from generateControlData function\";    \n    }\n    ```\n\n    Example: Custom controls script\n\n    ```\n    (function execute(inputs, outputs) {\n        var rich_controls = inputs.rich_control;\n        //this is the data returned from the 'serialized control data function' defind in designer\n        var serializedControlData = rich_control['serializedControlData'];\n        // if this rich control will require a response to move forward in topic flow\n        var isInput = rich_control['isInput'];\n        // if the component is suggesting using a Seismic control (web) that handles this\n        var uxComponentDefinitionId = rich_control['uxComponentDefinitionSysId'];\n        // the name of the custom control\n        var name - rich_control['name'];\n    \n        // 1) now perform some logic to transform this data into a custom ui (slack/facebook/sms ascii art/html/etc)\n        // 2) attach to outputs, i.e. outputs.text_message='foo :)'; for sms twillio\n    \n        // basic flow is to take the serializedControlData/Name/compId(optional) and create a custom UI component here\n        // that your client understands (i.e. a slack rich form payload)\n    })(inputs, outputs);\n    ```\n\n-   **Implement a provider-specific transformation of a custom control**\n\n    You can implement a provider-specific transformation for each custom control by using the **Sub type** field in the Custom Adapter Configuration \\[sys\\_cs\\_custom\\_adapter\\_config\\] table. You can publish a newer version of a custom control or a pre-built, ServiceNow custom control, also referred to as a default custom control, if needed. This involves publishing the appropriate Inbound and Outbound Workflow Studio action scripts and updating the configuration in the Custom Adapter Configuration \\[sys\\_cs\\_custom\\_adapter\\_config\\] table.\n\n    -   If you're publishing your own version of a ServiceNow custom control, overwrite the custom control record in the Custom Adapter Configuration table with your own Inbound and Outbound action script names.\n    -   Only one record with the same **Sub type** is allowed. If the same custom control is implemented by two different parties, only one can update the existing record with new Inbound and Outbound transformers.\n    **Note:** Once you override an existing custom control record, the system uses the new version of the custom control. For example, transformation scripts can transform multiple custom controls, such as Time Picker and Auth. If you add a Time Picker control with different inbound and outbound transforms, the newer Time Picker control is used. You cannot revert to the original version of the custom control.\n\n\n## Procedure\n\n1.  Navigate to **All**, and then enter `sys_cs_custom_adapter_config.list` in the filter.\n\n2.  Select **New**.\n\n3.  On the form, fill in the fields.\n\n<table id=\"table_zbd_nsp_b4b\"><thead><tr><th>\n\nField\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nProvider\n\n</td><td>\n\nThe name of the channel identifier for your custom chat integration. For details, see [Create a channel identifier for your custom chat integration](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/conversational-interfaces/virtual-agent/create-channel-id-va-cccif.md).\n\n</td></tr><tr><td>\n\nControl type\n\n</td><td>\n\nSelect the custom control that you designed. For custom controls, the type is always DefaultCustomControl.\n\n To learn more about custom controls, see [Customizing Virtual Agent with custom controls](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/conversational-interfaces/virtual-agent/custom-controls.md).\n\n</td></tr><tr><td>\n\nSub type\n\n</td><td>\n\nName of the custom control.\n\n</td></tr><tr><td>\n\nInbound transformer action\n\n</td><td>\n\nName of the inbound transformer action script for this rich control, such as, sn\\_va\\_sms\\_twilio.va\\_sms\\_twilio\\_adapter\\_input\\_text\\_inbound\\_transformer.\n\n</td></tr><tr><td>\n\nOutbound transformation action\n\n</td><td>\n\nName of the outbound transformer action script for this rich control, such as, sn\\_va\\_sms\\_twilio.va\\_sms\\_twilio\\_adapter\\_input\\_text\\_outbound\\_transformer.\n\n</td></tr></tbody>\n</table>4.  Select **Submit**.\n\n\n**Parent Topic:**[Supported Virtual Agent and Agent Chat features for custom chat integrations](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/conversational-interfaces/virtual-agent/va-features-custom-chat-integrations.md)\n\n"}}