Open Site Navigation

Walking through the Developer MVP Directory (LCHH Part 3)

Updated: Oct 21



This post finalizes our Developer MVP Directory prototype application. We did the majority of the work in the Part 1/2 and had a few more things to finish up for Part 3. I want to thank Maria Gabriela Ochoa Perez Waechter and Sharon Barnes for joining me on this installment of Lady Coding Happy Hour. If you want to catch the recorded version I've posted a link here.


Navigation


I mentioned this in the Part 1/2 post in the case anyone was following along, but we didn't get around to doing it until Part 3, and this was finalizing the action of clicking a card on the Data Set component and having it pass the SysID to the URL and opening the Info page to show the specific developer's data. To do this you need to click within the Data Set component on the Home page, and there's a link at the very bottom of the Configuration pane named Configure declarative action event mappings. There's a great Product documentation article on this if you want to know more. We set up the Declarative action we wanted to use in Part 1 when we were setting up our EVAM record via the EVAM View Config Action Assignment M2M record. This part is a little confusing in my opinion, because Action Assignments are their own thing, and you can create your own Action Assignment, but for our purposes we re-used an OOTB one called 'navigation' as seen in the Specify client action field on that post. From here we're invoking the Handled event we created earlier called OpenMVP which routes to the Info page and passes the SysId.

If you're following along in the video, at this point you'll see how when a card is clicked on the Home page, there is a redirect to the Info page and the SysId is passed via the URL which is picked up by the GlideRecord Query Data Resource we created previously to get information about the Developer MVP record, and finally is passed to the Scripted Property Values in the Stylized Text components we set up.


GlideRecord Query Data Resource Dot Walk


I created a whole post for this before the recording of the LCHH because I think it's a super helpful workaround for now as of the Quebec/Rome release when needing to dot walk from values using this Data Resource instead of setting up other Data Resources or GraphQL queries to handle this. This honestly seems like a limitation of the UI Builder UI at the moment, and not Data resources themselves. I'll recap here, but to see the walkthrough on this check out the post.


The issue we ran into is when we decided to reference the sys_user table via the Name field on the Developer MVP record, and still use the Photo field from the sys_user table, we weren't able to grab it from the GlideRecord Query Data Resource within the UI Builder UI. I found that it wasn't as easy a creating another GlideRecord Query Data Resource to point to the sys_user table, because the SysID passed is for the Developer table, and not the one in the Name field. The current Navigation Action Assignment doesn't allow for more fields other than Table, SysId, and URL so some Client Side scripting more than likely was needed to grab the SysId from the Name field. I thought, there had to be a better (i.e. easier) way, so I went into the backend of the page shown in UI Builder, and plugged name.photo into the Data Resource JSON. You can see from the article and video this does work, while not shown in the UI Builder UI, it does appear in the Output, and can be used in a Scripted Property Value.


Game Page/Survey


The final thing we wanted to accomplish was to provide a game to play based on the developer fun facts listed on their pages. Previously in Part 1/2 we had set up a Chrome Header UX Page Property in our UX App Configuration record for our portal, and set up the JSON as follows to route to a page called game.


[{"value":{"label":{"translatable":true,"message":"Play the Developer MVP Game"},"target":"","type":"route","value":{"route":"game"}}}]

During this session we created a blank page called game, and placed an iFrame component within the page. We were looking into Quizzes in ServiceNow but for the more part those look they need authenticated users, which brought us to another question at the end of the show that I'll mention in the Takeaways section, so we created a public Google Form for our purposes, but Quizzes in ServiceNow may be able to accomplish this, or maybe for your organization's needs, we just didn't go that deep in this series.


We had to do a few things to get the Google Form we created to show, first off we had to get the embedded link from the Google form and strip out some of the URL but retain the viewform?embedded=true part of the URL for it to show. Next, we had to Disable sandbox on the iFrame component. We mentioned on the show there's some documentation about this found on the Developer site but we didn't go in depth about the security implications of this but if you know please drop some comments below. Disabling the Sandbox on a iFrame component performs the following: Allows forms (which is what we needed), modals, popups, presentation, same-origin, scripts, and downloads.



Here's a final walkthrough of what the application looks like:



Takeaways


It was really great to work with other female identifying developers on this series and take a concept we were throwing around to make it a reality. We all definitely learned a lot in the process of this series as we were faced with workarounds, having to gain knowledge on topics very quickly, and learning about the UI Builder development process itself. I know I really enjoyed delving more into the backend of UI Builder and working with the UX Macroponent page when it came to workarounds but also reverting development done in UI Builder to a previous version.


We planned to publish this on a ServiceNow hosted site, but were promoted with a good question at the end of Part 3, and that was how to make this publicly accessible. There may be a Part 4 on how to do this from an application data perspective, but at the moment there doesn't seem to be information on how to make Now Experience portals publicly available so this may have to wait until San Diego. If I find out anything different before then, I'll create a new post or if you do, please comment.


Shout outs to the following individuals for making this possible!


Brad Tilton

Chuck Tomasi

Maria Gabriela Ochoa Perez Waechter

Sharon Barnes

Paige Duffey

Nia McCash


LCHH


Lady Coding Happy Hour Part 1

Lady Coding Happy Hour Part 2

Lady Coding Happy Hour Part 3



141 views0 comments