• David Tessaro

How to Manually Configure Widget Options

In this post we are going to take a meandering walk through an example of widget instance options. You will learn:

  1. How HTML templates use widget options to conditionally display elements.

  2. How to use a Chrome extension to inspect the scope of widgets options.

  3. How to manually format JSON code for a widget option.

If you’ve done much work with widgets, then you’ve probably encountered the inconsistency with how widget instance options are configured. Sometimes you can access the options you need from the Page Designer view, and sometimes you have to go view the Widget Instance record itself to access an option. Maybe you’ve even encountered options that you know exist, but aren’t accessible from any view at all!

That’s the case with the Data Table widget. If you’re not familiar with this widget by name, I’m sure you’ve seen it in the portal. It’s the widget you get when you click on the View All link in the bottom-right corner of a Simple List widget, like on the My Incidents/Request page:

Clicking View All takes you to a page with a Data Table widget:

So now we’re getting to our point about mysterious options. See the New button at the top of the list? Have you tried removing it? In the old days of CMS I would have simply dug out a unique selector for that button and hidden it via CSS. However, Service Portal is much more sophisticated, thankfully.

Inspecting the HTML behind that button reveals something interesting:

Check out the button element and you’ll see this snippet:

ng-if="options.show_new && data.canCreate"

ng-if controls the inclusion of this button on the page. It relies on two values to determine whether or not it should display: options.show_new and data.canCreate. The data.canCreate part will refer to ACLs to test the user’s permission to create a new record on this table. The options.show_new part refers to a widget option. This means we can hide this button by simply setting the value of options.show_new to false. However, good luck trying to find where that option lives.

Open the instance options by holding CTRL and clicking on the widget, then choose Widget Options. Do you see any options for Show New?

How about opening up the widget instance record in the native UI. See it anywhere in there? No, you don’t.

I know we can use the option because we found it in the template. But I also know that no value is stored for this option at all. How do I know this? AngularJS Inspector to the rescue!

I use a Chrome extension called AngularJS Inspector to inspect the Angular components of the Service Portal app. Add this extension to your Chrome browser and it will enable you to gain very useful insight to your widgets.

With this extension, it takes 3 quick steps to drill down into the data I want to see for each widget.

First, right-click on your widget and choose Inspect.

Second, hone in on the widget HTML element using the pointer tool (located in the upper-left corner of the element inspector panel).

The widget HTML element can be identified by it’s attributes: widget=”widget”, options=”options”, etc.

Third, make sure the widget element is highlighted, then click on the AngularJS Properties tab of the details panel on the right. You can expand the options section of this to inspect the option values that are coming through for this widget. Notice that there are no show_new options. That means no show_new option has been configured for this widget.

So, if options.show_new is used in the template, how are we supposed to toggle the value for it? Enter JSON.

If you haven’t already opened the widget instance record in the native UI, do it now by going to the Widget Instances module. In this example we’re dealing with the data table widget on the out-of-box list page, so this is the instance record you’re looking for:

Open that record up (open the instance record, not the widget) and go the Misc tab:

We can manually enter a value for the show_new option in the Additional options, JSON format field. The JSON for this option is easy.

Start with opening and closing curly brackets:

{ }

Insert the name of the option we want to configure, like this:

{ "show_new": }

After the colon, insert another set of curly brackets:

{ "show_new": { } }

Add property/value pairs for value and displayValue:

{ "show_new": { "value": false, "displayValue": false } }

Your final JSON code in the Additional options, JSON format field looks like this:

Click Update. Now go back and check out the view of this widget in the portal.

Voila! No New button. Furthermore, if you inspect that widget and dig into the AngularJS properties, you’ll see that the value we entered for the show_new option now appears in the options object:

Now you have a little more insight into widget instance options, how to identify them in the browser, and how to manually add them to a widget instance.

Aloha, Jeff!

#configurewidgetoptions #customizingserviceportal #serviceportal #serviceportalhowto

Read More: Recent Posts