Hey Thanks for sharing, I have a question: Is it possible to create a UI policy on a section, that is, filling a value in a variable from a previous section will display the next section respectively
UI Policies don’t have any direct knowledge of Sections in this app. So you wouldn’t be able to manipulate the Section visibility via UI Policy. It should be technically possible to customize the widget to support setting Sections via either a hidden form field or possibly even expose an API to Client Scripts to achieve that goal.
Thanks for sharing. This is incredible. I'm curious to check how did you handle the client side validations across different sections/pages? Has there been any check on the "next" button on each page?
Hi Sai, thank you! With this approach, it waits to validate until you hit the submit button. On one hand, it allows users to page through freely which can be an advantage on longer forms where you may want to fill out the information you immediately know first. On the downside, you don’t find out something is missing until the end. A more robust solution is definitely possible but it would likely require changes to the g_form API or a much more complex code base that essentially replicates and extends what g_form already does. In short, if we enumerate all the variables, their containers, and their sections, then we could check the valid state on each call to next / previous. So far I’ve tried to keep this solution as simple as possible.
@@jaydeepmehta831 Check out ServiceNow’s Add to Wish List feature. It is Save as Draft under a different name. But you can configure the button text through the Messages table. I can’t remember if I tested this myself but it should work with this solution.
You will need the admin role or another role that allows configuring the form view. If you configure the Related Lists for the Catalog Item form view, you should be able to add the Sections related list.
Hi Rameshwar, here are the basic steps: 1. Create Catalog Variables as normal 2. Create Container Start and Container End variables at the beginning and end of sections Note: Containers can wrap Single Row Variable Sets but not Multi-Row Variable Sets. MRVS are treated as Containers on their own. 3. On the Catalog Item form, add the Sections Related List (Section > Catalog Item) if it is not already visible 4. Create a Section record for each step you want to show in the Progress Stepper widget, be sure to set the following fields - Title: The name displayed on the Progress Stepper - Order: Determines the sort order of the steps in the Progress Stepper, lowest first per ServiceNow convention - Include MultiRow Set: A list of MultiRow Variable Sets that will be shown when this section is selected and hidden when other sections are selected - Include Containers: A list of Containers that will be shown when this section is selected and hidden when other sections are selected The creation of Container Start and Container End variables are required for the behavior to work. I'm working on a more visual step by step to demonstrate but wanted to get you some information as quickly as possible.
@@CodeCreative I've one more question, How did you show the review section ? did you create another container for that and any idea how to make a final section to review all the questions read-only before submit ?
@@CodeCreative So you created a custom widget to fetch all variables and show as read only ? did you add that widget in the CodeCreative Catalog experiencev0.0.1 update sets.
Sure thing, the easiest way to access the code is to install the scoped app update set in your instance. Those can be found on ServiceNow Share or GitHub: Github: github.com/codecreativeio/ServiceNow-Catalog-Experience Share: developer.servicenow.com/connect.do#!/share/contents/9409802_codecreative_catalog_experience?v=0.1&t=PRODUCT_DETAILS
![React Tutorial For Beginners [ReactJS] | ReactJS Course | ReactJS For Beginners | Intellipaat](http://i.ytimg.com/vi/9vZ8ELqerPo/mqdefault.jpg)
This solved an issue I was having. GREAT JOB!!!
Thank you, glad it helped!
Thank you for making this video! As always, you make such incredibly helpful videos
Thanks for the support, glad you liked it!
Nice. Thanks for sharing this.
Awesome work.
Thanks for sharing!
Thank you, glad you like it!
Hey
Thanks for sharing, I have a question: Is it possible to create a UI policy on a section, that is, filling a value in a variable from a previous section will display the next section respectively
UI Policies don’t have any direct knowledge of Sections in this app. So you wouldn’t be able to manipulate the Section visibility via UI Policy. It should be technically possible to customize the widget to support setting Sections via either a hidden form field or possibly even expose an API to Client Scripts to achieve that goal.
Thanks for sharing. This is incredible.
I'm curious to check how did you handle the client side validations across different sections/pages?
Has there been any check on the "next" button on each page?
Hi Sai, thank you! With this approach, it waits to validate until you hit the submit button. On one hand, it allows users to page through freely which can be an advantage on longer forms where you may want to fill out the information you immediately know first. On the downside, you don’t find out something is missing until the end.
A more robust solution is definitely possible but it would likely require changes to the g_form API or a much more complex code base that essentially replicates and extends what g_form already does. In short, if we enumerate all the variables, their containers, and their sections, then we could check the valid state on each call to next / previous. So far I’ve tried to keep this solution as simple as possible.
it is really good, i wonder if we can add some logic between sections something similar to UI policy or client script?
Hello, Thank you for sharing this reference.
Also, request if you can guide solution to Save Draft.
Thanks,
Jaydeep
@@jaydeepmehta831 Check out ServiceNow’s Add to Wish List feature. It is Save as Draft under a different name. But you can configure the button text through the Messages table. I can’t remember if I tested this myself but it should work with this solution.
This tab "sections" does not appear in my catalog item. How to add it?
You will need the admin role or another role that allows configuring the form view. If you configure the Related Lists for the Catalog Item form view, you should be able to add the Sections related list.
Hi am having some issue to get section can you please provide record producer XML. or docs for creating it steps by steps.
Thanks in Advance..!!!
Hi Rameshwar, here are the basic steps:
1. Create Catalog Variables as normal
2. Create Container Start and Container End variables at the beginning and end of sections
Note: Containers can wrap Single Row Variable Sets but not Multi-Row Variable Sets. MRVS are treated as Containers on their own.
3. On the Catalog Item form, add the Sections Related List (Section > Catalog Item) if it is not already visible
4. Create a Section record for each step you want to show in the Progress Stepper widget, be sure to set the following fields
- Title: The name displayed on the Progress Stepper
- Order: Determines the sort order of the steps in the Progress Stepper, lowest first per ServiceNow convention
- Include MultiRow Set: A list of MultiRow Variable Sets that will be shown when this section is selected and hidden when other sections are selected
- Include Containers: A list of Containers that will be shown when this section is selected and hidden when other sections are selected
The creation of Container Start and Container End variables are required for the behavior to work. I'm working on a more visual step by step to demonstrate but wanted to get you some information as quickly as possible.
This is an excellent solution
Thank you! Glad you like it
Thank You!
Of course! Happy to help
It is really good, How did you hide the Catalog Item Submit button ?
I used display: none; in the Widget CSS to hide it. Then the custom Submit button uses JS to simulate a click on the original button.
@@CodeCreative Got it, Thank you!
@@CodeCreative I've one more question, How did you show the review section ? did you create another container for that and any idea how to make a final section to review all the questions read-only before submit ?
@@balaramireddyk9837 Yes, that was done with another container with a Variable of the type that lets you embed a custom widget.
@@CodeCreative So you created a custom widget to fetch all variables and show as read only ? did you add that widget in the CodeCreative Catalog experiencev0.0.1 update sets.
Thank You for making this video..!!
Could you please provide code..
Sure thing, the easiest way to access the code is to install the scoped app update set in your instance. Those can be found on ServiceNow Share or GitHub:
Github: github.com/codecreativeio/ServiceNow-Catalog-Experience
Share: developer.servicenow.com/connect.do#!/share/contents/9409802_codecreative_catalog_experience?v=0.1&t=PRODUCT_DETAILS