service portal, widget-sc-cat-item-v2

[Ak_12]

Hi,

I am trying to customize the OOB widget widget-sc-cat-item-v2 , and i cloned this widget.

My requirement is i created a catalog item , there is a field name asset. So whenever asset field is empty the submit button should be disabled, and asset field as any value then submit button should be enabled

[Community Alums]

Hi @Ak_12 ,

To customize the widget-sc-cat-item-v2 widget in ServiceNow to disable the submit button when the "asset" field is empty and enable it when the field has any value, follow these steps:

Clone the Widget:

Since you have already cloned the widget-sc-cat-item-v2 widget, open your cloned version for editing.

Edit the Client Script:

In the cloned widget, you need to add logic in the client script to handle the enable/disable functionality of the submit button based on the "asset" field value.

Update the HTML Template:

Modify the HTML template to bind the submit button's ng-disabled attribute to a scope variable that tracks the state of the "asset" field.

Here are the steps you can follow:

1: Update the Client Controller

In your cloned widget, locate the Client Controller section and add a watch on the "asset" field. This will monitor changes to the "asset" field and update the state of the submit button accordingly.

(function() {

  // Your existing controller code here

  // Add this function to initialize the controller
  function init() {
c.data.asset = ''; // Assuming asset is a string, initialize accordingly
    c.isSubmitDisabled = true;
    // Watch the asset field for changes
c.$watch('c.data.asset', function(newValue) {
      c.isSubmitDisabled = !newValue;
    });
  }
  // Call the init function in the controller
  init();
  // Your existing controller code here
})();

2: Modify the HTML Template

Update the HTML template of your cloned widget to bind the ng-disabled attribute of the submit button to the isSubmitDisabled scope variable.

<div>

  <!-- Your existing HTML code here -->

  <!-- Assuming you have an input field for the asset -->

<input type="text" ng-model="c.data.asset" />

  <!-- Update the submit button to bind the disabled state -->

  <button type="submit" ng-disabled="c.isSubmitDisabled">Submit</button>

  <!-- Your existing HTML code here -->

</div>

Thanks,

Hope this helps.

If my response proves helpful please mark it helpful and accept it as solution to close this thread.