<h2>Example widgets</h2><br/><div style="overflow-x:auto"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta content="text/html; charset=UTF-8" /><meta name="copyright" content="(C) Copyright 2025" /><meta name="DC.rights.owner" content="(C) Copyright 2025" /><meta name="generator" content="DITA-OT" /><meta name="DC.type" content="concept" /><meta name="DC.title" content="Example widgets" /><meta name="abstract" content="All widgets in Service Portal can be used as example code for how scripts are used in a widget. However, several base system widgets have been included expressly for this purpose." /><meta name="description" content="All widgets in Service Portal can be used as example code for how scripts are used in a widget. However, several base system widgets have been included expressly for this purpose." /><meta name="DC.subject" content="Service Portal example widgets" /><meta name="keywords" content="Service Portal example widgets" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/widget-showcase.html" /><meta name="DC.relation" scheme="URI" content="../../../administer/navigation-and-ui/concept/c_NavigationAndTheUserInterface.html" /><meta name="DC.relation" scheme="URI" content="../../../administer/general/concept/configure-uis-and-portals.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/c_ServicePortal.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/service-portal-widgets.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/announcements-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/approvals-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/approval-info-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/approval-record-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/breadcrumbs-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/breakout-game-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/calculator-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/carousel-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/change-password-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/cool-clock-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/data-table-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/data-table-url-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/documents-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/form-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/header-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/hello-world-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/html-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/icon-link-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/icon-menu-list-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/language-switch-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/link-button-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/login-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/my-requests-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/my-request-widget-portal.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/org-chart-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/simple-list-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/sample-footer-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/ticket-attachment-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/ticket-conversations-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/ticket-fields-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/ticket-location-widget.html" /><meta name="DC.relation" scheme="URI" content="../../../build/service-portal/concept/user-profile-widget.html" /><meta name="DC.format" content="XHTML" /><meta name="DC.identifier" content="sp-example-widgets" /><link rel="stylesheet" type="text/css" href="../../../CSS/commonltr.css" /><title>Example widgets</title></head><body id="sp-example-widgets"> <div class="breadcrumb"><a class="link" href="../../../administer/navigation-and-ui/concept/c_NavigationAndTheUserInterface.html" title="Interact with ServiceNow AI Platform applications and data in the way that works best for you.">Configure user experiences</a> > <a class="link" href="../../../administer/general/concept/configure-uis-and-portals.html" title="Customize your interface to create an efficient, unique experience for users and customers.">Configure UIs and portals</a> > <a class="link" href="../../../build/service-portal/concept/c_ServicePortal.html" title="Service Portal allows you to build a mobile-friendly self-service portal experience for your employees or customers. Service Portal is a ServiceNow AI Platform feature that is active by default and interacts with parts of the platform so users can access platform features through portals.">Service Portal</a> > <a class="link" href="../../../build/service-portal/concept/service-portal-widgets.html" title="Widgets are what define the content of your portal pages. You can use the base system widgets provided with Service Portal, clone and modify widgets, or develop custom widgets to fit your own needs.">Using portal widgets</a> > </div> <h1 class="title topictitle1" id="ariaid-title1">Example widgets</h1> <div class="body conbody"><p class="shortdesc">All widgets in Service Portal can be used as example code for how scripts are used in a widget. However, several base system widgets have been included expressly for this purpose.</p> <p class="p">Use the example widgets to see how to use HTML, CSS, or client and server scripts in Service Portal. You can also clone and extend each widget to suit your needs.</p> </div> <div class="related-links"> <ul class="ullinks"><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/announcements-widget.html">Announcements widget</a></strong><br /> Users can view all active announcements. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/approvals-widget.html">Approvals widget</a></strong><br /> Users can approve or reject items directly within <span class="ph">Service Portal</span>. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/approval-info-widget.html">Approval Info widget</a></strong><br /> The Approval Info widget works in tandem with the Approval widget to display details about the approval request. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/approval-record-widget.html">Approval Record widget</a></strong><br /> The Approval Record widget shows the full record for an approval including the activity stream. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/breadcrumbs-widget.html">Breadcrumbs widget</a></strong><br /> The breadcrumbs widget allows users to easily navigate around a portal. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/breakout-game-widget.html">Breakout Game widget</a></strong><br /> Add a fun, interactive 404 page to pages that do not exist using the Breakout Game widget. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/calculator-widget.html">Calculator widget</a></strong><br /> The calculator widget does simple calculations. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/carousel-widget.html">Carousel widget</a></strong><br /> Showcase specific items in your catalog using a scrolling list of images in the carousel widget. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/change-password-widget.html">Change Password widget</a></strong><br /> Users can change their passwords using the Change Password widget.</li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/cool-clock-widget.html">Cool Clock widget</a></strong><br /> Show different times around the world using the Cool Clock widget. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/data-table-widget.html">Data table from instance definition widget</a></strong><br /> Display a filtered list on your portal using the data table from instance definition widget. From the widget's context menu, portal users can export the filtered list. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/data-table-url-widget.html">Data Table from URL definition widget</a></strong><br /> The Data Table from URL definition widget displays the table you select from the list. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/documents-widget.html">Documents widget</a></strong><br /> You can add, edit, or delete documents associated with records based on user permissions through the Documents widget. You can use this widget in your portal or clone and customize it.</li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/form-widget.html">Form widget</a></strong><br /> The form widget is a platform form within the <span class="ph">Service Portal</span> UI with a few differences. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/header-widget.html">Header menu widget</a></strong><br /> The Header Menu widget controls which options appear in the page header. You can use this base system widget as-is in your portal.</li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/hello-world-widget.html">Hello World widgets</a></strong><br /> The Hello World widgets are included with <span class="ph">Service Portal</span> as examples of how to use and create widgets. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/html-widget.html">HTML widget</a></strong><br /> Use the HTML widget to directly inject HTML, text, lists, or content in general into a page. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/icon-link-widget.html">Icon Link widget</a></strong><br /> Link to any other item. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/icon-menu-list-widget.html">Icon menu list widget</a></strong><br /> A simple list with a glyph icon next to each link. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/language-switch-widget.html">Language Switch widget</a></strong><br /> Add the Language Switch widget to a landing or homepage to allow your users to change the language of the page. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/link-button-widget.html">Link button widget</a></strong><br /> The Link Button widget is a button you can nest in any other widget that links to another destination. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/login-widget.html">Login widget</a></strong><br /> The login widget controls user access to your site. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/my-requests-widget.html">My Requests widget</a></strong><br /> The My Requests widget stores all of your open requests in one place. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/my-request-widget-portal.html">My Requests widget</a></strong><br /> Use the My Requests widget (my-requests-v2) to enable requesters to view open or closed requests in Service Portal.</li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/org-chart-widget.html">Organization Chart widget</a></strong><br /> The Organization Chart widget shows employees in a tree structure relative to their manager. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/simple-list-widget.html">Simple List widget</a></strong><br /> The Simple List widget can be used to display any list in the system within <span class="ph">Service Portal</span>. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/sample-footer-widget.html">Sample Footer widget</a></strong><br /> The Sample Footer widget is an example of a footer you can use in your portal. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/ticket-attachment-widget.html">Ticket Attachments widget</a></strong><br /> Use the attachment widget to attach items to tickets. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/ticket-conversations-widget.html">Ticket Conversations widget</a></strong><br /> Record of ticket items. Users can use this widget to communicate back and forth with the fulfiller and the receiver. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/ticket-fields-widget.html">Ticket Fields widget</a></strong><br /> The Ticket Fields widget displays information about a request that a user has made. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/ticket-location-widget.html">Ticket Location widget</a></strong><br /> Share your location in a ticket. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li><li class="link ulchildlink"><strong><a href="../../../build/service-portal/concept/user-profile-widget.html">User Profile widget</a></strong><br /> Display user profile information. <span class="ph">You can use this base system widget as-is in your portal or clone it to suit your own business needs.</span></li></ul> <div class="familylinks"> <div class="parentlink"><strong>Parent Topic:</strong> <a class="link" href="../../../build/service-portal/concept/widget-showcase.html" title="You can use base system widgets as-is in your Service Portal or clone them to suit your own business needs.">Widget library</a></div> </div> </div></body></html></div>