---
original_url: "https://jace.pro/blog/meetup-lab-service-portal-custom-variables/"
format: markdown
ai_optimized: true
---

Meetup Lab: Service Portal Custom Variables- # Meetup Lab: Service Portal Custom Variables

August 15, 2019 [servicenow ](/tags/servicenow/)[service-portal](/tags/service-portal/)

  Enable AI AnimationThis lab walks through building custom Service Portal catalog variable widgets using a macro variable approach. Authors: Cody Esmay, Hunter Wolf. Cody is a local Minnesota ServiceNow expert and the brains behind this pattern.
*This lab originally from the [sndevs meetups repo](https://github.com/sndevs/meetups) and [hosted on GitHub Pages](https://sndevs.github.io/meetups/).*

## [What We Will Build](#what-we-will-build)

A Service Portal Widget used as a macro variable on a catalog item
- The variable uses attribute fields to dynamically set up custom-looking checkboxes with font-awesome icons
- Because this doesn’t create new UI elements, it still works with client scripts and UI policies

## [Getting Started](#getting-started)

- Open Studio and import the scoped app: `https://github.com/sndevs/snServiceCatalogWidget.git`

### [App Branches](#app-branches)

BranchDescriptionMasterFinished example0.1Starting point with widget created0.4Mid-way — one set of checkboxes replaced with font-awesome icons0.7Finished example (same as Master)## [Lab 1: Set Up the Widget Server Script](#lab-1-set-up-the-widget-server-script)

- Open the `ButtonsWidg` widget
- Review the [server.js](./0.4.server.js.html) pattern
- Type it out yourself — learn by doing

## [Lab 2: Set Up the Client Script](#lab-2-set-up-the-client-script)

- Review the [client.js](./0.4.client.js.html) pattern
- Implement the client controller that handles checkbox interactions

## [Lab 3: Set Up the HTML Template](#lab-3-set-up-the-html-template)

- Review the [template.html](./0.4.template.html.html) pattern
- Build the template that renders custom checkboxes using font-awesome icons

## [Lab 4: Variable Attributes](#lab-4-variable-attributes)

By default the variable attribute field isn’t listed on the form. The easiest way to get to it for the lab is to add it to a list.

Once added, you’ll notice the first set of checkboxes have:

`button_widget=what_do_widget;icon=fa-icon`

These details are parsed by the widget:

- **Grouping** is dictated by `button_widget=value`
- **Icon** is set by `icon=fa-icon`

Update the first macro to use the `ButtonsWidg` widget and recheck the form — the first set of icons should be working.

## [Lab 5: Add a Second Set of Variables](#lab-5-add-a-second-set-of-variables)

To get a feel for how dynamic this is, add attributes to the second set of checkboxes:

`button_widget=another_widget;icon=fa-icon`

Where:

- `another_widget` is the name of a newly created macro (like `what_do_widget`)
- `fa-icon` uses font-awesome 4.7.0 icon names

Reference: [Font Awesome 4.7.0 Icons](https://fontawesome.com/v4.7.0/icons/)

## [Final Check](#final-check)

Request the item from the service catalog — the checkboxes retain their values so they work like regular checkboxes, just with custom styling.

---
[View this page on GitHub](https://github.com/jacebenson/jace.pro/tree/main/./src/posts/2019/2019-08-15-meetup-sp-custom-inputs-lab.md).

[Meetup Lab: Service Portal Custom Variables](https://jace.pro/blog/meetup-lab-service-portal-custom-variables/) [Jace Benson](https://jace.pro) ![Jace Benson](https://jace.pro/icon-512x512.png)

---

*This content is from Jace Benson's ServiceNow and tech blog at jace.pro*
*Original post: https://jace.pro/blog/meetup-lab-service-portal-custom-variables/*