Skins
Last updated
Last updated
By updating the Template on your Sections, you can update the format of your search results. The overall look & feel of your Searcher is controlled by Skins. We’ve included pre-packaged Skins that you can use, simply by updating the ‘Skin’ field on your Searcher. You can also modify or create your own Skins. Note that Skins have minimal effect to Searchers on workspaces, as ServiceNow tightly controls that UI.
To understand how to approach Skin customization, it helps to understand how the OneSearch UI renders. Check out the diagram below to see how the components are nested.
At the top level, you have the ServiceNow UI – this could be a form, a portal page, a record producer, a Workspace, etc. The level of customization available here varies. This is generally where the search field exists.
Next you have the OneSearch UI Macro/Widget/Component, which is the container for the entire OneSearch UI. There are no visual components here, just functional stuff.
Next you have the OneSearch Skin (YDS OneSearch->Skins). This is the visual container for a Searcher. It determines the frame of the Searcher and how the Sections are rendered. You can create your own Skins and use different Skins for different Searchers. There may be some unfamiliar variables here, so we recommend using an existing Skin as an example.
Finally, you have the OneSearch results. These live in the OneSearch Section record under the Appearance tab and can be unique for each individual searcher Section. Here, we use AngularJS compiled HTML to dynamically generate each search result. Again, we recommend using existing Sections as examples.
Customization at this level is advanced, and may require knowledge of HTML, CSS, and AngularJS. However, we’ve given you plenty of examples, so feel free to experiment! We’ve included lots of information about helper classes in the annotations on the Docs & Settings & Section records to help you along.
