2 Replies · Latest reply on Jan 5, 2018 3:17 AM by Thiyagarajan j

    Creating a UI Page from an existing form

      Hello, quick question: I've been hearing about the benefits of UI pages and how they work better in some cases than using a ServiceNow popup dialog.  Only question is whether or not one could craft one from an existing form view, instead of having to create one from scratch (web development isn't my strong suit).  Haven't seen it around the community or the docs site so I'm wondering if it is a planned feature.

       

      Thanks

        • Re: Creating a UI Page from an existing form
          Sachin Namjoshi

          Hi,

           

          You need to know Jelly scripting to work on UI pages.

          You will have to define your columns, tables etc in HTML part of your UI page.

           

          Please check below for sample UI page code.

           

          https://www.servicenowguru.com/tag/ui-pages/

           

          But, i would suggest you to explore Service portal since Angular JS, Bootstrap is future.

          You can configure pages, widgets in SP.

           

          Get started with Service Portal

           

          Regards,

          Sachin

          Please mark answer as Correct, helpful as appropriate.

          • Re: Creating a UI Page from an existing form
            Thiyagarajan j

            Hi Tahnalos,

                You can create Form by service portal or Jelly scripting.

                In the Jelly scripting you can able to add Angular.js, React.js or any other UI library is required. As of now Servicenow is supporting for angular.js. Make use of angular.js.

             

              Here is the below code. Please check it.

              index.xml:

            <?xml version="1.0" encoding="utf-8" ?>

            <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

            <j:set var="jvar_app" value="appName"/>

            <j:set var="jvar_plugin_js_top" value="js_includes.xml"/> <----- Here needs to include all the dependency JS files ------>

            <j:set var="jvar_plugin_css" value="css_includes.xml"/> <----- Here needs to include all the dependency CSS files ------>

            <g:inline template="html_page_ng_common.xml">

                 <form>

                             <---- Here is the form html codes---->

                 </form>

            </g:inline>

            </j:jelly>

             

            js_includes.xml

            <?xml version="1.0" encoding="utf-8" ?>

            <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

            <g:requires name="scripts/sm.commons/js_includes_sm_commons.js" includes="true" />

            <g:requires name="scripts/sm.author/js_includes_sm_author.js" includes="true" />

            </j:jelly>

             

            css_includes.xml

            <?xml version="1.0" encoding="utf-8" ?>

            <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

            <g:requires name="styles/snc.commons/snc_commons_includes.css" includes="true" />

            <g2:requires name="styles/sn_notification.css"/>

            <g2:requires name="styles/css_includes_ng_form_elements.css" includes="true" />

            <g2:requires name="/styles/filter.css" includes="true" />

            </j:jelly>

             

            Regards,

            Thiyagarajan