How to Clone a Widget to the Home Page on the ESC Portal?

[Hari S1]

Hi, 

I want to display the Software widget (currently available on a page) on the home page of the Employee Service Center (ESC) portal.

Could someone guide me on how to clone or move this widget to the home page without breaking its functionality?

Thank you in advance

[KrishnaMohan]

Hi @Hari S1 

Why you want clone the widget ? do want customize the widget functionality or do want move widget place in home page?

If you want move widget or rearrange widget Please find below process

1. Navigate to the Page: In your Service Portal, go to the page where you want to move a widget.

2. Open the Page Designer: Hold down the Ctrl key and right-click on any empty space on the page. From the context menu, select Page Designer.

3. Rearrange the Widgets: The Page Designer will open, showing you the page's layout, including containers, rows, and columns. You can now simply drag and drop widgets from their current location to a new one. The Page Designer's grid system (based on Bootstrap) will guide you to valid drop zones. You can move widgets within the same container or to a different one.

4. Save your Changes: Once you've positioned the widgets as you like, click the Save button in the Page Designer's header. The changes will be applied to the page.

Note : In general, no, moving a widget on a Service Portal page will not affect its core functionality and widget is separate from its placement. You can confidently move widgets around on a page using the Service Portal Designer without worrying about breaking the code/functionality that makes them work.

Steps to clone a widget 

1. Navigate to the Widgets List: In the ServiceNow platform, use the filter navigator to go to Service Portal > Widgets. This will display a list of all available widgets.

2. Select the Widget: Find and open the widget you want to clone. You can use the search bar to locate it quickly by name or ID.

3. Initiate the Clone: Once you have the widget's record open, you'll see a "Clone Widget" button in the header. Click this button. A dialog box will appear asking you to provide a new name and ID for the cloned widget.

   • Name: Give it a clear, descriptive name (e.g., "My Custom Header Menu").

   • ID: The ID will automatically populate based on the name, but you can change it. Use a naming convention that indicates it's a custom widget (e.g., my_custom_header_menu). The ID should contain only lowercase letters, numbers, underscores, and hyphens.

4. Review and Save: The system will create a new, editable copy of the widget. This new widget will have its own record, separate from the original. You can now make changes to the HTML template, CSS, client script, and server script of the cloned widget without affecting the original.

5. Address Dependencies: Be aware that some complex widgets, especially those that include Angular templates or directives, may have dependencies that are not automatically cloned.

   • Angular Templates: If the original widget uses Angular ng-templates, you'll need to manually copy these templates and re-associate them with your new widget.

   • Angular Providers (Directives): Similarly, if the widget uses Angular providers (directives), you will need to clone these and update the references in your new widget's code to point to your cloned directives.

Best Practices

• Avoid Over-Cloning: Before you clone a widget, first check if your required changes can be made using Instance Options or CSS in the Theme. This is often an easier and more upgrade-safe approach.

• Documentation: Document which widgets you have cloned and why. This will save you a lot of time during future upgrades.

• Testing: Always test your cloned widget on a test page or in a non-production instance before deploying it to your live portal.

If this helped to answer your query, please mark it helpful & accept the solution.
Thanks!
Krishnamohan