Make list clickable in Modal PopUp

triciav
Kilo Sage

I need to be able to have the list of Existing Conferences in he spmodal window selectable so the user can click on an existing conference and the name is filled in on the catalog variable for the event name.

Is this possible?

Thank you 

This is my spmodal.open : In this example how can I make the List of names selectable.

So the user can choose from any of the existing names?

find_real_file.png

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }

    var onlyNew = g_form.getValue('conference_option');
   if(onlyNew == 'new_conference'){

        var ga = new GlideAjax('ConfAjaxUtils'); //x_btig_bookings.ChoiceAvailable
        ga.addParam('sysparm_name', 'getExisting');
        ga.addParam('sysparm_table', "u_conferences");
        ga.getXML(getresponse);
   }
        function getresponse(response) {
            var answer = response.responseXML.documentElement.getAttribute("answer");
            if (answer) {

                spModal.open({
                    "title": "List of Existing Conferences:",
                    "message": answer,
                    "buttons": [{
                            label: "✘ Close",
                            primary: true

                        }
                    ],
                    "backdrop": "static",
                    "keyboard": false
                }).then(function(answer) {
                    
                });
            }

        }
    }
4 REPLIES 4

Nick Parsons
Mega Sage

I would recommend creating a widget for this and then using the widgetId property in the options when you call spModal.open() to display your widget template. This means you can instead do:

if(onlyNew == 'new_conference'){
  spModal.open({
    "title": "List of Existing Conferences:",
    "widget": "<your widget id>", // widget id (not sys_id)
    "buttons": [{
      label: "✘ Close",
      primary: true,
    }],
    "shared": {
      "g_form": g_form // gives us access to g_form in the widget client code
    },
    "backdrop": "static",
    "keyboard": false
  });  
}

 Rather than using GlideAjax to fetch your data from your client script, you can use the server script editor in the widget that you create to fetch your list of conferences, and then use angularjs to display those conferences (using ng-repeat). For each conference that you list, you can add an ng-click directive to add a click handler for each item in your list, which can call a function in your widget's client-side code. The client-side code can do any processing it needs, such as an additional call to the server (if needed). It can then use c.options.shared.g_form.setValue(...) to set/update any variables on your catalog item, such as the event name. See example widget below:

find_real_file.png

Hey Nick, I tried this but still cannot get it working.

The Widget Loads and the list of names but I am not able to make them clickable to select.

 

Any other suggestions?

find_real_file.png

Hi @triciav, are you able share what your widget code looks like?

Please make sure that you have used ng-click and that you have added your click function to $scope using $scope.functionName = ... (which must be specified as a parameter in the client script function wrapper). You can use things such as alert("test"); in your click handler function to double check that the click is occurring. You can also open up your browser's dev-tools (right click + inspect) and view the "console" tab to see if your widget might have some sort of error that is preventing it from working correctly.