Sometimes there will be a requirement to show a dynamic "field" on a form. This could be used to show custom UI for the current user or for the record.

From the technical side, you would use a UI Formatter, which basically calls a UI Macro in-line when included in the form. These formatters will be visible in the Form Designer.

Below is how I set one up in my personnel developer instance.

Creating the UI Macro

UI Macros are written in Jelly-Script, which can be somewhat of a learning curve for some. They can include tags and use jQuery or g_form like the rest of client scripts.</p> <p>Jelly uses `evaluate` scripts that run server-side before the macro renders, so if you need to add the current caller’s details, this would need to be done using a client script, perhaps as an onChange on a caller field.</p> <p>Here’s some jelly to get you started, which adds a rudimentary form field with user initials in it. <u>(using gs.getUser(). ie. the current user, not caller)</u></p> <pre><code class="markup">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt; &lt;j:jelly trim=&quot;false&quot; xmlns:j=&quot;jelly:core&quot; xmlns:g=&quot;glide&quot; xmlns:j2=&quot;null&quot; xmlns:g2=&quot;null&quot;&gt; &lt;div class=&quot;custom-form-group&quot;&gt; &lt;g:evaluate var=&quot;jvar_user_fullname&quot; jelly=&quot;true&quot;&gt; var user = JSUtil.escapeAttr(gs.getUser().getFullName()); user; &lt;/g:evaluate&gt; &lt;style&gt; .custom-form-group { overflow: hidden; } .custom_caller_icons { height: 60px; } &lt;/style&gt; &lt;div data-type=&quot;label&quot;&gt; &lt;label for=&quot;caller_details&quot; dir=&quot;ltr&quot; class=&quot;col-xs-12 col-md-3 col-lg-4 control-label&quot;&gt; &lt;span title=&quot;information relating to the caller&quot; class=&quot;label-text&quot;&gt;Caller Details&lt;/span&gt; &lt;/label&gt; &lt;/div&gt; &lt;div class=&quot;col-xs-10 col-sm-9 col-md-6 col-lg-5 form-field input_controls custom_caller_icons&quot;&gt; &lt;!-- you could populate this using a client-script (onchange perhaps)--&gt; &lt;img style=&quot;height: 60px;&quot; height=&quot;60&quot; src=&quot;https://ui-avatars.com/api/?name=${jvar_user_fullname}&quot; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/j:jelly&gt; </code></pre> <h2>Creating the UI Formatter</h2> <p>UI Formatters can be created under the &quot;System UI&quot; -&gt; &quot;Formatters&quot; module.</p> <p>When creating the formatter, the &quot;Formatter&quot; field must include the UI Macro you created previously, as &quot;<ui\_macro\_name>.xml&quot;.</p> <p>Choose the table that the formatter will be added to, and give the formatter a unique name.</p> <h2><a href="https://docs.servicenow.com/bundle/helsinki-servicenow-platform/page/administer/form-administration/task/t%5FCreateAFormatter.html?ref=blog.tgxn.net" target="_blank" rel="noopener">Adding the Formatter to the Form.</a></h2> <p>On the table that you selected when creating the UI Formatter, navigate to the form designer, or form layout tool.</p> <p>Your UI Formatter should be visible in the list, with the other Formatters, this can be dragged onto the form like any other field/formatter.</p> <h2>Final Result</h2> <p><img src="https://blog.tgxn.net/content/images/2018/11/image-1.png" alt=""></p> <p>The UI Formatter should be visible on the modified form layout</p>