{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":42616,"path":"platform-user-interface/service-portal/ui-macro-widget.md","title":"Replace a Service Catalog form script with a widget","bundle":null,"doc_type":null,"release":"australia","body":"\n# Replace a Service Catalog form script with a widget\n\nYou can use widgets in Service Portal to replace UI Macros. If your Service Catalog form includes a UI Macro that references other fields or variables on the form, you can create a widget to hold reusable code and embed it within the Service Catalog form. Use special syntax to access any variable fields on the form.\n\n## Before you begin\n\nRole required: admin or sp\\_admin\n\n## Procedure\n\n1.  Create a widget that performs the action you would like to use in catalog item forms.\n\n    See step 7 for a simple example widget that accesses another variable on the form.\n\n2.  Open a catalog item that previously used a UI Macro or other reusable component not supported in Service Portal.\n\n3.  In related lists, add a new variable to the catalog item.\n\n4.  Configure the variable form to add the **Widget** field.\n\n5.  In the **Type** field, select **Macro**.\n\n6.  In the **Widget** field, select a widget that performs the desired action.\n\n7.  Use the `$scope.page.g_form()` or `$scope.page.field` syntax in the embedded widget to access the catalog item values.\n\n    This example shows how to modify the value of a single-line text variable with the name **color** associated with the catalog item.\n\n    -   **Widget HTML Template**\n\n        ```\n        <div>  \n          Data from catalog variable:  \n          <h1>{{ c.data.message }}</h1>  \n        </div>\n        ```\n\n    -   **Widget client script**\n\n        ```\n        function($scope) {  \n             var c = this;  \n          \n             //Watch for changes in the color variable  \n             $scope.$watch(function () {  \n                  return $scope.page.g_form.getValue('color');  \n             }, function (value) {  \n             //Update local data object with data from variable  \n             c.data.message = value ? 'Content of color variable: ' + value : '';  \n        });  \n        }  \n        ```\n\n    You can use the following to access variable or catalog item fields:\n\n    -   `$scope.page.g_form()`: The g\\_form instance on the form. You can use all supported g\\_form methods described in [Service Portal and client scripts](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/unsupported_client_scripts.md). For example, `g_form.setValue('variable_name', 'new value');`.\n    -   `$scope.page.field()`: The object that represents the variable.\n    When you open the catalog item in the Service Portal, the embedded widget accesses the variable fields associated with the catalog item.\n\n    \\[Omitted image \"macro-var.png\"\\] Alt text: The input to the variable displays in the embedded widget.\n\n\n**Parent Topic:**[Developing custom widgets](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/widget-dev-guide.md)\n\n"}}