Customizing Widgets

[arnoldzwane]

Good Day,

I am not familiar with using Widgets (Angular/Bootstrap) on the new Service Portal and would appreciate it if someone can take me through the customization procedure for Widgets. I 've read the documentation but still couldn't get the concept clearly. I understand you first have to clone the widget and do your changes on the clone version. My first confusion was where to do my changes among the different source codes (HTML, Client Script and Server Script). When trying to do changes, I kept getting errors when testing my widget.

I actually want to add a field, description, on the attached "Approval Form" widget; underneath "Opened by". Please assist!

Kind Regards

Arnold

[Rushit Patel2]

yes..if you want to edit any OOB widget you need to clone it and make your updates on clonned instance.

there are 5 parts in a widget.

1)HTML - > responsible for markup. what things you want on UI.

2)CSS -> how those things will be styled.

3)Client Script --> angular client side script acts as a bridge between HTML and Server script(actually does lot more than that)

4)Server Script --> you can do normal servicenow server side scriptiing here. fetch data and put it as property of data object so that it will carry forward to client script and HTML.

5)Link function -> rarely used. you can do DOM manipulation here.

life cycle flow

Server script ->Client Script ->HTML ->CSS ->Link function

now coming to your other question. you need to update "Approval record" widget.

i believe above is your requirement.

update line 4 of server script.

t = $sp.getFieldsObject(task, 'number,short_description,opened_by,requested_by,start_date,end_date,price,recurring_price,recurring_frequency');

to

t = $sp.getFieldsObject(task, 'number,description,short_description,opened_by,requested_by,start_date,end_date,price,recurring_price,recurring_frequency');

and on your HTML add line below line 9

<div ng-if="task.description">{{::task.description.display_value}}</div>

(please mark helpful/like/correct if it helps)

[arnoldzwane]

Hi Rushit,

Thank you very much for your quick response.

With the two changes above, I keep getting these error messages when I run a Preview of the cloned widget:

I tried this on two instances and I keep geiting the same errors.

My other dilemma is how do I tell the Service Portal to use the cloned widget instead of the OOB one, or the system automatically take care of that?

Kind Regards

Arnold  

[Rushit Patel2 · Accepted solution]

i dont think it will work from preview mode. it's okey if it throws errors in preview. it should work well in end user mode.

no system doesnt take care of replacing OOB widget with your widget on page.

go to the approval page.

1)ctrl + right click on the widget you want to replace.

2)select page designer.

3)find OOB widget in page designer. remove it using delete icon

4)search your custom widget from left list of widgets

5)drag n drop it where OOB widget was

(please mark helpful/like/correct if it helps)

[arnoldzwane]

Hi Rushit,

Indeed, it's working fine in the End user mode.

Thank you very much for your assistance; much appreciated - you are a Star!

Kind Regards

Arnold