Once we have created a UI macro, we can create a UI formatter. An existing UI macro is required in order to create a UI macro. This is because the UI macro provides the Jelly (XML) code to be used by the formatter.

To create a UI formatter, open Studio, select Forms & UI | UI Formatter in the Create Application File wizard, as shown in the following screenshot, and click on the Create button:

Fill in the new record form for the UI formatter with the values mentioned here:

• Name: International Notice
• Formatter: international_notice.xml (the name of the UI macro appended with .xml)
• Table: Booking Request
• Type: Formatter

Click on the Submit button to finish creating the formatter. The newly created formatter will be added to the Booking Request table. We can open any form view of the table to bring the formatter into the view and arrange it just like any other form field.

To bring the International Notice formatter we just created to the Employee view of the Booking Request table, open the view in the Form Designer in Studio, as shown in the following screenshot, and bring in the Formatters from the Fields tab on the left to one of the sections on the right:

Click on the Save button on the top left of the Form Designer once you are satisfied with the layout of your form. We can confirm the changes and whether our UI macro and formatter are working properly by opening the Booking Request form in the Employee view, as shown in the following screenshot, by clicking on the Travel Booking Application | Create new module in the main ServiceNow interface:

As you can see in the preceding screenshot, the UI formatter brings in the code written in the UI macro in order to enhance the form by bringing in external elements. The set of UI macros and forms can be used to create endless UI features and include codes to show highly dynamic content, such as maps or images.