Open widget within service portal modal

Mike49
Tera Contributor

3 weeks ago

I've tried for days to get this to work but nothing is working (even Copilot's suggestions).

 

I have a widget from the Appointment Bookings scoped app called "Appointment Booking - Select" (ID: sn-appointment-booking-select).

 

I want this widget to display within a modal in another widget (we'll call it Widget A).  

Widget A displays case details and has an Actions dropdown.  One of the options in the dropdown is "Reschedule appointment".  When the customer clicks this, I want a modal to appear with the "Appointment Booking - Select" widget so the user can select another time slot.  

How do I do this?  I'm banging my head here.

0 Helpfuls
  • 287 Views
3 REPLIES 3

iamavijith
Tera Contributor

3 weeks ago

First you have to add the onclick event on the "Reschedule appoint". So as example maybe you are using ng-click="c.openModal()" this function to open the modal Now in the client controller part add the spModal wrapper class Now call the widget through the fucntion c.openModal c.openModal = function(){ spModal.open({ title: <title of the modal>, widget: '<widget-id>', }) You can check for spModal wrapper class what all more value you have to pass

0 Helpfuls

avijit_haldar
Tera Contributor

3 weeks ago

First, add an onclick (or Angular ng-click) event to the “Reschedule Appointment” button.
For example, you might have something like this ng-click="c.openModal()"

This function will be responsible for opening the modal.

Next, in your client controller, make sure you include the spModal wrapper class.

Then, call the widget from inside your c.openModal function:

c.openModal = function () {
    spModal.open({
        title: "<title of the modal>",
        widget: "<widget-id>"
    });
};
You can refer to the spModal wrapper class documentation to see what additional parameters you can pass.
0 Helpfuls

Mike49
Tera Contributor

3 weeks ago

I appreciate the information but I still can't get the widget to display within the modal.  Here is the configuration:

 

Use Case:  Allow a customer to reschedule an appointment from the Service Portal

Design approach:  Within a catalog case detail page, have an option in the Actions dropdown called Reschedule appointment.  This will open a modal window that allows the customer to select another time slot using the Appointment Booking/Dynamic Scheduling logic. 

 

The following are the service portal records involved:

  • csm_ticket (page)
  • Catalog Case Ticket Configuration (Ticket Configuration):  Uses the Case Ticket Action Custom widget as the Action Widget
  • Case Ticket Action Custom (widget):  Displays an Action dropdown with the following options:
    • Enable Support Access
    • Escalate
    • Request Callback
    • Reschedule appointment
    • Cancel appointment
    • Accept Solution
    • Reject Solution
    • Close Case
  • Appointment Booking – Reselect (widget):  This is the widget I want to embed within a modal (either spModal or uibModal) and the modal is opened within the Case Ticket Action Custom (widget).  The customer should be able to see available time slots using the Dynamic Scheduling/Appointment Bookings logic

Client controller (Case Ticket Action Custom widget)

c.rescheduleAppointment = function() {
 
spModal.open({ 
title: "Reschedule appointment", 
widget: 'sn-appointment-booking-reselect',
widgetInput: {
sys_id: c.data.caseId,
catalog_id: c.data.catalogItem
}
});

}

 

 

0 Helpfuls