How to display another widget based on change of catalog item variable value on Service Portal

[Kranthi Kumar3]

Hello All,

We have Sc catalog item widget which opens the catalog item. In the item we have a variable called Application type with two drop down values App and Web. So here we wanted to open different widgets based on Application type selected 

If the Application Type is Web then a different widget should open within the same page and If application type is App then  it Should stay on the same page with previous widget.

Summary: We are handling two widgets based on the drop down values selected in same page.

Note: Different catalog items having different widgets but created in the same page.

Thanks in Advance

[Deepak Ingale1]

Hello,

Below similar thread will assist you.

1) You need to use $watch over the catalog variable on which you want perform some actions

2) Once done, you can set the controller variable based on the change in variable value using 1)

3) Then use that controller variable in HTML part of widget to call "Widgets" programatically ( Embeded widget )

https://community.servicenow.com/community?id=community_question&sys_id=39144fe5dbd8dbc01dcaf3231f96...

https://docs.servicenow.com/bundle/london-servicenow-platform/page/build/service-portal/concept/c_Ne...

Note : Please mark reply as correct / helpful if it answered your question.

[Kranthi Kumar3]

Hi Deepak,

We are looking to get different widget and that should display in the same page but it should not display in the same widget.

Note.Based on the variable change a completely new widget should be replace with existing widget on the same page.

Thanks 

[SatheeshKumar · Accepted solution]

Try creating separate macro variable for each widget, then hide/show your macro variable based on your condition.(appicable if you are lookong for how to show different widgets based on variable from item) 

OR

If you want to replace catalog item widget itself then try redirecting to a new page having the alternative widget. /else you need to build both widget function inside a single widget and hide/show using ng-if angular option. 

OR

Make use of embedded widget functionality

div>
    <widget id="widget-cool-clock"></widget>
</div>

For more details:

https://docs.servicenow.com/bundle/london-servicenow-platform/page/build/service-portal/concept/c_NestedWidgets.html

This will fix your issue.

-satheesh