Cloning the walk-up experience widget (Online Check-in Experience widget)

Go to solution
Janel
Kilo Sage

‎05-26-2020 02:48 PM

Has anyone successfully cloned the walk-up experience widget: Online check-in experience?

We want to add an option for people to reference an existing task record as part of their appointment scheduling so I need to edit the widget to give them that option.

  1. I've clone the widget Online Check-in Experience. 
  2. I've created copies of the 8 ng-templates and renamed them.
  3. I've created copies of the 4 angular providers (directives) so they can reference the updated templates (templateUrl). 
  4. I've looked for any "ng-include=" that needs to be updated in the HTML and updated all the inline directives.
  5. I've scoured the client and server scripts for any references to the original templates or directives.

And for the life of me, I still cannot get the dang widget to render properly.  The "reason for visit" select box template will not render at all on the page and the Scheduling widget does not render correctly (or at all) either.  The hours, location, and *parts* of the away messages do work fine.

Before I went as far as creating copies of the directives, if I had BOTH the custom widget and OOB widget on the page it *seemed* to work fine except some console errors about duplicate ID's, which is no good.

Has anyone actually been able to clone this widget and get it to work?  What am I missing that the reason select box won't render and the scheduling widget call won't work?  I did *not* try and clone the scheduling widget and it is using OOB.

 find_real_file.png

find_real_file.png

Labels:
Preview file
40 KB
Preview file
130 KB
Preview file
130 KB
  • 5,982 Views
1 ACCEPTED SOLUTION

Go to solution
Janel
Kilo Sage

‎06-10-2020 12:10 PM

I opened a HI ticket about cloning the widget and what could have been missed.  That resulted in our dev instance being rebooted.  After that everything seemed to start working.  I was able to confirm these steps do work in an entirely different instance.

Clone the Widget

  1. Make sure you are in the "Walk-Up Experience" application scope!
  2. Go to Service Portal > Widgets and open the widget Online check-in experience (online-check-in-experience).
  3. At the top-right, click Clone Widget.
    1. If you weren't redirected to your widget, open the copy you just created.
  5. Give your copy a new ID (top left).  For the remainder of this post, I'll use the suffix copy for everything, but you can name it whatever you want.
    1. "online-check-in-experience-copy"

Copy the 8 ng-templates

  1. Open the OOB widget.
  2. Scroll down to the Templates related list.
  3. Make a copy of all 8 templates and attach it to your copied widget. The name must be unique.  I used the suffix of Copy (with a capital C) for each template.
    1. It must be in camel case and no special characters! Not even dashes! 
    2. It will be referenced in kebab case in the HTML (you'll see later).
  4. For reference here are the ng-templates I made copies of. You do not need to change anything in these templates.
    1. awayMessagesCopy
    2. onlineConfirmationModalCopy
    3. promptConfirmationModalCopy
    4. queueTemplateCopy
    5. reasonForVisitSelectCopy
    6. scheduledHoursCopy
    7. walkUpAppointmentPanelCopy
    8. This is the one that tricked me. If you notice on line 9 in the walkUpAppointmentPanel template, there is this ng-transclude.  This does not need to be changed.  You'll see where it gets referenced by a directive later.

<!-- Child element of directive -->
 <div ng-transclude="reasonSelect" ng-if="!c.hasAppointment"></div>

    1. walkUpOnbehalfAppointmentPanelCopy
      1. Just like its counterpart above, there is also an ng-transclude looking at reasonSelect.

Copying and updating the 4 Agular Providers (just the Directives)

  1. Open the OOB widget and scroll down to the Angular Providers related list.
  2. You will need to make copies of these 4 directives, with new names, and include these changes:
    1. onlineScheduleMessageCopy
      1. Update line 10 with the copied template name: templateUrl: 'awayMessagesCopy',
    3. reasonForVisitSelectCopy
      1. Update line 12 with the copied template name: templateUrl: 'reasonForVisitSelectCopy',
    5. walkUpAppointmentCopy
      1. Update line 15 with the copied template name: templateUrl: 'walkUpAppointmentPanelCopy',
      2. Update line 18 in the transclude with the copied reasonForVisitSelectCopy template: templateUrl: 'walkUpAppointmentPanelCopy',
        1. This is where that transclude from the ng-template happens.
    7. walkUpOnbehalfAppointmentCopy
      1. Update line 16 with the copied template name: templateUrl: 'walkUpOnbehalfAppointmentPanelCopy',
      2. Update line 19 in the transclude with the copied reasonForVisitSelectCopy template: 'reasonSelect': '?reasonForVisitSelectCopy'
  2. Open your cloned widget.
  3. Scroll down to the Angular Providers related list.
  4. Remove the 4 original directives.
    1. onlineScheduleMessage
    2. reasonForVisitSelect
    3. walkUpAppointment
    4. walkUpOnbehalfAppointment
  6. Add your 4 copied and updated directives.
    1. onlineScheduleMessageCopy
    2. reasonForVisitSelectCopy
    3. walkUpAppointmentCopy
    4. walkUpOnbehalfAppointmentCopy

Updating the widget's HTML

  1. Open your cloned widget.
    1. You can open it in the full UI or in the widget editor, it does not matter.
  2. Calls to the angular directives and templates will be made using kebab case in HTML. Google it if you don't know what it is.
  3. Unfortunately, there are no line numbers in the HTML field. To make this significantly easier to point out where to make changes, copy the entire HTML contents into the HTML field of a UI page so you can see line numbers.
    1. Copy all the HTML contents from your widget.
    2. Create a new UI Page (you do not need to save it).
    3. Delete all the contents in the HTML field on the UI page.
    4. Paste the HTML from your widget into the HTML field on the UI page.
    5. Now things can be referenced by line number (or you can search the HTML for the changes noted below).
  4. At line 108
    1. Change <online-schedule-message to <online-schedule-message-copy
  5. At line 112
    1. Change </online-schedule-message> to </online-schedule-message-copy>
  6. At line 116
    1. Change <reason-for-visit-select to <reason-for-visit-select-copy
  7. At line 120
    1. Change </reason-for-visit-select> to </reason-for-visit-select-copy>
  8. At line 135
    1. Change <online-schedule-message to <online-schedule-message-copy
  9. At line 139
    1. Change </online-schedule-message> to </online-schedule-message-copy>
  10. At line 161
    1. Change <div ng-include="'queueTemplate'"></div> to <div ng-include="'queueTemplateCopy'"></div>
      1. This one does not go to kebab case because it is being called as an include.
    2. At line 177
      1. Change <walk-up-appointment to <walk-up-appointment-copy
    3. At line 187
      1. Change <reason-for-visit-select to <reason-for-visit-select-copy
    4. At line 192
      1. Change </reason-for-visit-select> to </reason-for-visit-select-copy>
    5. At line 193
      1. Change </walk-up-appointment> to </walk-up-appointment-copy>
    6. At line 215
      1. Change <walk-up-onbehalf-appointment to <walk-up-onbehalf-appointment-copy
    7. At line 226
      1. Change <reason-for-visit-select to <reason-for-visit-select-copy
    8. At line 231
      1. Change </reason-for-visit-select> to </reason-for-visit-select-copy>
    9. At line 232
      1. Change </walk-up-onbehalf-appointment> to </walk-up-onbehalf-appointment-copy>
    10. At line 245
      1. Change ng-include="'scheduledHours'" to ng-include="'scheduledHoursCopy'"
    11. Copy the updated HTML back into your cloned widget.

Updating the widget's client controller

  1. Open your cloned widget.
    1. You can open it in the full UI or in the widget editor, it does not matter.
  2. On line 312
    1. Change c.data.msgs.agreeModalMsg, c.data.msgs.stayInQueueMsg, clearFields, postLeaveQueueConf, 'promptConfirmationModal');
    2. To c.data.msgs.agreeModalMsg, c.data.msgs.stayInQueueMsg, clearFields, postLeaveQueueConf, 'promptConfirmationModalCopy');
  3. On line 591
    1. Change walkUpModal.thresholdModal($scope, data.userPosition, 'onlineConfirmationModal');
    2. To walkUpModal.thresholdModal($scope, data.userPosition, 'onlineConfirmationModalCopy');
  4. On line 640
    1. Change clearFields, postQueueChange, 'promptConfirmationModal');
    2. To clearFields, postQueueChange, 'promptConfirmationModalCopy');

Put your copied widget on a page and give it a test.

This worked for me on a fresh instance.

View solution in original post

17 REPLIES 17

Go to solution
Mario Preciado
Tera Contributor
In response to Sara3

‎12-01-2021 09:27 AM 

we are in the Rome version
0 Helpfuls

Go to solution
Mario Preciado
Tera Contributor
In response to Sara3

‎05-04-2022 02:01 PM 

Special notifications were created from the additional notifications section, access restrictions were added to the widget, as well as options that only certain executives can see
0 Helpfuls

Go to solution
MB14
Tera Contributor

‎03-04-2022 05:54 AM

How to you make copies ? do you just create new and copy and paste info from the online check in templates into your cloned widget ?
0 Helpfuls