{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":2796,"path":"application-development/ui-builder/controller-builder.md","title":"Create custom controllers \\(Advanced feature\\)","bundle":null,"doc_type":null,"release":"australia","body":"\n# Create custom controllers \\(Advanced feature\\)\n\nBuild custom controllers to use across experiences. Easily connect reusable data, scripts, and events to your page and set up inputs, outputs, and events.\n\n## Before you begin\n\nRole required: ui\\_builder\\_admin\n\n## Procedure\n\n1.  Navigate to **All** > **Now Experience Framework** > **UI Builder**.\n\n2.  Select **Create**.\n\n3.  Select **Controller**.\n\n4.  On the form, fill in the fields.\n\n    |Field|Description|\n    |-----|-----------|\n    |Name|Name to track your controller internally.|\n    |Description|Short description to help find your controller. Write a description that helps page builders understand what content is included in the controller.|\n\n5.  Select **Create**.\n\n    The controller building window opens.\n\n    \\[Omitted image \"controller-builder-window.png\"\\] Alt text: Controller building window with no data added.\n\n6.  Add data resources.\n\n    1.  Select **+ Add data resource**.\n\n    2.  Select a data resource from the list.\n\n    3.  Select **Add**.\n\n    4.  Configure the data resource.\n\n    5.  Select **Save**.\n\n7.  Add an external controller dependencies.\n\n    1.  Select **+ Add external controller dependency**.\n\n    2.  On the form, fill in the fields.\n\n        |Field|Description|\n        |-----|-----------|\n        |Name|Name to identify your external controller dependency.|\n        |Label|Label to help find your external controller dependency.|\n        |Controller|Select a controller for your external controller dependency.|\n\n    3.  Select **Save**.\n\n8.  Add client state parameters.\n\n    1.  Select **Client sate parameters**.\n\n    2.  Select **+ Add**.\n\n    3.  Enter a unique name for the client state parameter.\n\n    4.  Select the type from the dropdown.\n\n    5.  Enter an initial value in the field.\n\n    6.  Select **Save**.\n\n    For more information about client state parameters, see [Client state parameters](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/client-state-parameters.md).\n\n9.  Add client scripts.\n\n    1.  Select the **+** icon next to **Client scripts**.\n\n    2.  Write your script to perform an action.\n\n    3.  Add a **Script include** or **Associated components**, which shows up in the `imports` parameter of your client script function.\n\n    4.  Select **Apply**.\n\n    5.  Select **Save**.\n\n\n## What to do next\n\nUse the custom controller you just created by [adding the controller to a page.](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/controllers.md)\n\n**Parent Topic:**[Dynamically expose data in UI Builder pages \\(advanced feature\\)](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/data-resources.md)\n\n"}}