UI Builder - Page Variants
in this video we're going to talk about page variants in ui builder so we've looked at and you're probably familiar with at this point how to create a page you can create one from scratch you can create it from a template you can add page parameters but what if you come into a situation where you have two different versions of the same url you want to show somebody so maybe they have different roles and you want to show them one thing based on their role or maybe based on the data on the page you want to show them different versions of the page variants are a really nice solution to that problem and so we will get into that so right now i have this page that i created in a previous video where we have passed a required parameter and we bound that to the component and you can see that when i create a page it automatically creates me a default variant of that page so every page has a default variant and if i click into that on the settings here i see a few different options so i'm going to start by duplicating this variant so i could create a new variant from scratch but in my case i my new variant is also going to use a component like this so i just want to duplicate it so i get that component so i'm going to hit duplicate it's going to ask me to name it so we'll call this home default variant because i'm so creative and i'll hit create so success i've created this variant so now it's asking me if i want to set the visibility on this page and you'll notice there are you know two different ways i can set the visibility i mentioned this already but the first is audiences so you can think about this like user criteria in the catalog where you can define you know what is this audience mean by default it uses roles but there are some options for more things as well so if i click add audience i think i have an audience defined already i have this work submitter audience i could add here and i guess if i hit save uh we've got this one audience i can order these audiences and that could be who sees my page i'm going to delete that but the conditions this is the part where it's a little more i don't know if i would say complicated or complex but it took me a little bit longer to understand how this works so with the conditions i can use audiences conditions or a combination of them so if i set conditions i have an encoded query variant conditions field here so the note here says you know if i pass table as incident and assist id is negative one which in service now sis id is negative one means it's a new record or sysid is not negative one so that means it's an existing record on the incident table so for this it's actually looking at the required parameters of the page which you can kind of think of those as fields but our only required parameter now is color so this is on our variant so i'm going to say color does not equal blue so that's going to be our conditions and then i'm going to run this at 100 so the order evaluates from the lower number to the higher number so let's hit save all right so this is going to run if color's not blue at order 100 and i'm going to also edit the conditions on our first variant so this is going to run at 0 and i'm going to say color is blue now i could have just done this and not done the other condition but i don't think that would have made for quite as fun a demo and then let's change something slightly on this page so we've got our two variants they have their own conditions right now they're showing the same thing so instead of grabbing this this required page parameter and populating it in the text let's just say the color is not blue so let's save this so my expectation is that if i pass blue in the url here i'm going to get this version of the page which is just going to show me blue and if i don't pass blue instead of showing me whatever i pass it's going to show me this static text the color is now blue so let's try it out hit open so i see blue here and then if i change this to red instead of seeing red i should see the color is not blue and it worked so obviously that was a really simple example you could get much more complex and and have your you know your page be just slightly different or very different uh depending on what your use case is there i don't believe there's a limit to the number of variants so you know if you had a lot of different people accessing a page and wanted to show them something different based on who it is you could do that and you know you have a lot of options here so this was a really exciting feature when i saw it as someone who has built various portals in servicenow on different technologies this was a fairly new concept but a really exciting one
https://www.youtube.com/watch?v=5ZcP2cQ7uQw