How do I add a widget to a catalog variable

[timhorn]

We have several complex forms that include multiple UI Pages.   We just upgraded to Istanbul and we're looking to convert

our CMS portal to the Service Portal.   I've seen lots of posts about how UI Pages and UI Macros will have to be replaced with

variables that contain widgets.   Many of those posts show what the variable form should look like, with the "widget" field

showing up in the "default value" section.   No matter what I do, I can't get the widget field to show up.   I modified the form

layout to include it.   I tried using every type of variable.   It just won't show up.   Is there some trick to this?   I have to be

missing something obvious.

[Tommy Jensen]

Do you have an example of how that is done?

[mshetty794]

hi chris ,

below is my widget code   which is a text box

<div><input id="text"   /></div>

i have added in service catalog and i am able to see in service portal, now i fill my data in text box before submitting. I am trying to read in onSubmit function (catalog client script).

function onSubmit(){

var a=$("#text").val();

}

I am getting $ is not defined. I tried with document.getElementId() didn't work. please, can u explain with an example, would be very helpful

Also how to set value to hidden catalog variable.

[ChrisBurks]

Hello Mithun,

When getting data from a service portal widget that's embedded with a catalog item it's easier to use the client controller within the widget instead of the catalog client script. Also for future reference "document" and "$" is not available in the catalog client script when viewed via Service Portal.

But they're available within the client controller of the widget.

To get data from the widget to a variable in the catalog item leverage Angularjs in the widget. There are methods that are available to do this.

1) $scope.page.g_form() to access catalog item variables

2) scoped variables in Angularjs

Using your simple example of an input field within a widget I would add an ngModel to the input field to have easy access to the value.

<div>

    <input ng-model="myinput">

</div>

In the client controller of the widget I can now grab the value of the input. In this case the variable is available on $scope. I could have also used something like "c.myinput". Then it would have been available on the "c" object that is usually defined by default in the client controller.

function($scope) {

        $scope.myinput;

}

And if I had a variable on the catalog item named 'exampleVar' I could access and set that variable using $scope.page.g_form.set('exampleVar', $scope.myinput).

My script would probably look something like this

function($scope) {

$scope.$watch('myinput', function(newVal, oldVal) {

                          $scope.page.g_form.setValue('exampleVar',   newVal);

          });

}

Notice that I used $watch here so that I don't have to worry about when the form is submitted. This way, once the data changes in the input field, it also changes immediately in the other places I assigned the var to.

Here is a screencast of the example. Disclaimer: I'm not all that great of a vlogger. So bare with me.

Catalog Item with Embedded widget data interaction

BTW: you can retrieve data from catalog item variables to use in your widget with $scope.page.g_form.getValue('name of variable')

EDIT:

I forgot to add: here is the place where you can get information with catalog items and service portal widgets

https://serviceportal.io/docs/documentation/client_scripting.md

[Ahmed Doma2]

Hi Chris ,

thanks for your effort to help if i may i need to ask you about weird issue i am having on London release .
i don't have the section where i can add the created widget

What should i do i want to use something instead of UI macro and use it with Portal

[ChrisBurks]

It was moved under the Type Specification tab.