Ui page example

This article is a supplement to the ServiceNow documentation. For full documentation please refer ServiceNow official website

Checkout our NEW Video Channel you can like and subscribe too!

UseCase

Customer wants to see their own profile details under self service as shown below.

Solution:

We are going to create a ui page and design the layout.

2.Then we will create script include and get the current user details

3.Finally we will create a module and add the ui page in the module

UI Page

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<link href="69f676de1b2d2014d16a6538b04bcb80.cssdbx?" rel="stylesheet" type="text/css"/>
	<h1 id='short_name'></h1>
	<div class="page-content page-container" id="page-content">
    <div class="padding">
        <div class="row container d-flex justify-content-center">
            <div class="col-xl-6 col-md-12">
                <div class="card user-card-full">
                    <div class="row m-l-0 m-r-0">
                        <div class="col-sm-4 bg-c-lite-green user-profile">
                            <div class="card-block text-center text-white">
                                <div class="m-b-25"> <img src="https://img.icons8.com/bubbles/100/000000/user.png" class="img-radius" alt="User-Profile-Image"></img> </div>
                                <h6 class="f-w-600" id="name"></h6>
								<p id="dept"></p>
								<!--<h6 class="text-muted f-w-400" id="dept"></h6>-->
                            </div>
                        </div>
                        <div class="col-sm-8">
                            <div class="card-block">
                                <h6 class="m-b-20 p-b-5 b-b-default f-w-600">Basic Information</h6>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <p class="m-b-10 f-w-600">Email</p>
                                        <h6 class="text-muted f-w-400" id="email_id"></h6>
                                    </div>
                                    <div class="col-sm-6">
                                        <p class="m-b-10 f-w-600" >Phone</p>
                                        <h6 class="text-muted f-w-400" id="phone"></h6>
                                    </div>
                                </div>
                                <h6 class="m-b-20 m-t-40 p-b-5 b-b-default f-w-600">Other Details</h6>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <p class="m-b-10 f-w-600">Groups</p>
                                        <h6 class="text-muted f-w-400" id="usr_grp"></h6>
                                    </div>
                                    <div class="col-sm-6">
                                        <p class="m-b-10 f-w-600">Last LoggedIn</p>
                                        <h6 class="text-muted f-w-400" id="last_loggedin"></h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
		
	<div class="overlay">
    <div id="loading-img"></div>
		
</div>
</div>
</j:jelly>

jQuery(document).ready(function() {

    jQuery(".overlay").show();

    var ga = new GlideAjax('auto_populate_user_profile');
    ga.addParam('sysparm_name', 'getDetails');
    ga.addParam('sysparm_user_id', g_user.userID);

    ga.getXML(callBack);

    function callBack(response) {

        jQuery(".overlay").hide();
        var answerObj = response.responseXML.documentElement.getAttribute("answer") + '';
        var allValues = answerObj.split(",");

        jQuery('#email_id').html(allValues[0]);
        jQuery('#last_loggedin').html(allValues[1]);
        jQuery('#usr_grp').html(allValues[2]);
        jQuery('#phone').html(allValues[3]);
        jQuery('#name').html(allValues[4]);

        jQuery('#short_name').html(allValues[5] + ' Profile');
		jQuery('#dept').html(allValues[6]);
    }

});

Script Include

var auto_populate_user_profile = Class.create();
auto_populate_user_profile.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {

    getDetails: function() {

        var thisUser = this.getParameter('sysparm_user_id'); //'700a359f1b01d4102752b912cd4bcb18';
        var delimiter = ',';

        var gr = new GlideRecord('sys_user');
        gr.get(thisUser);

        var grpGr = new GlideRecord('sys_user_grmember');
        grpGr.addQuery("user", thisUser);
        grpGr.query();
        if (grpGr.next()) {
            grps = grpGr.group.getDisplayValue();
        }

        var shortName = gr.getValue('first_name') + "'s";

        var dept = new GlideRecord('cmn_department');
        dept.get(gr.getValue('department'));

        return gr.getValue('email') +
            delimiter +
            gr.getValue('last_login_time') +
            delimiter +
            grps +
            delimiter +
            gr.getValue('mobile_phone') +
            delimiter +
            gr.getValue('first_name') + " " + gr.getValue('last_name') +
            delimiter +
            shortName +
            delimiter +
            dept.getValue('name');

    },
    type: 'auto_populate_user_profile'

});