Workplace Service Delivery modules in EC Pro

[Kelly Park1]

Hi, I have a query regarding Workplace Service Delivery modules and it's compatibility on EC Pro. 

Is it possible to open WSD modules within EC Pro without having to open the WSD Employee Centre? 

For example, can you open the "Make a Reservation" page within EC Pro without opening/redirecting to a different tab? WSD Search - Workplace Services 

The same question applies to other WSD modules like Workplace Concierge. 

[Dr Atul G- LNG]

Hi @Kelly Park1 

I think no, unless this module or catalog item is available in the native view for users.

[Murtaza Saify]

1. Use the WSD Widgets in EC Pro

WSD modules (e.g., "Make a Reservation") are built using Service Portal widgets. You can embed these widgets directly into EC Pro pages.

Steps:

1. Identify the WSD Widget:

   • Go to Service Portal > Widgets.

   • Search for the WSD widget you want to use (e.g., wsd_make_reservation for the "Make a Reservation" page).

2. Add the Widget to an EC Pro Page:

   • Open the Employee Center Pro portal in Service Portal Designer.

   • Drag and drop the WSD widget onto the desired page or section.

   • Configure the widget properties (if required).

3. Test the Integration:

   • Navigate to the EC Pro page and verify that the WSD module loads correctly.

---

2. Use a URL Link to the WSD Page

If embedding the widget is not feasible, you can link directly to the WSD page within the EC Pro portal.

Steps:

1. Get the WSD Page URL:

   • Open the WSD Employee Center and navigate to the "Make a Reservation" page.

   • Copy the URL from the browser.

2. Add a Link in EC Pro:

   • In the EC Pro portal, add a Link or Button widget.

   • Set the link to the WSD page URL.

   • Use the target="_self" attribute to open the page in the same tab:

     html

     Copy

     <a href="https://your-instance.service-now.com/wsd_make_reservation" target="_self">Make a Reservation</a>

     Run HTML

---

3. Use an iFrame to Embed the WSD Page

If the WSD module is not available as a widget, you can embed the WSD page directly into EC Pro using an iFrame.

Steps:

1. Add an iFrame Widget:

   • In the EC Pro portal, drag and drop the iFrame widget onto the page.

   • Set the Source URL to the WSD page (e.g., https://your-instance.service-now.com/wsd_make_reservation).

2. Adjust iFrame Settings:

   • Set the height and width to fit the page layout.

   • Enable scrolling if needed.

---

4. Customize the WSD Widget for EC Pro

If the WSD widget is not fully compatible with EC Pro, you may need to customize it.

Steps:

1. Clone the WSD Widget:

   • Go to Service Portal > Widgets, find the WSD widget, and clone it.

   • Modify the cloned widget to ensure compatibility with EC Pro.

2. Update the Widget Script:

   • Adjust the client script or server script to handle EC Pro-specific logic (e.g., user context, branding).

3. Test the Custom Widget:

   • Add the customized widget to an EC Pro page and verify its functionality.

---

5. Use a Custom Page in EC Pro

Create a custom page in EC Pro that replicates the functionality of the WSD module.

Steps:

1. Create a New Page:

   • In the EC Pro portal, create a new page (e.g., "Make a Reservation").

2. Add Relevant Widgets:

   • Use standard or custom widgets to replicate the WSD module's functionality.

3. Integrate with WSD Backend:

   • Use Script Includes or REST APIs to interact with the WSD backend.