Walking through the Developer MVP Directory (LCHH Part 1 & 2)

Updated: Aug 30



This post will go through what we're doing and what we've done so far on Live (Lady) Coding Happy Hour for the Developer MVP Directory app.


You can watch Part 1 and 2 here, and I'll create a new post once we finish the app with Part 3. Thank you to the ServiceNow Developer Advocate program for letting us take over and shining a spotlight on female-identifying developers in the ServiceNow space. I also want to give a shout out to everyone who helped with the LCHHs:


Brad Tilton

Chuck Tomasi

Maria Gabriela Ochoa Perez Waechter

Paige Duffey

Nia McCash


Also here's a plug for the WomenNow blog which you can find Maria, Paige, and Nia posting on, and has a lot of great posts not only technically related but also about female-identifying experiences in the ServiceNow space as well.


Part 1


Developer MVP Table


This table was kept intentionally simple, we just loaded some basic data we got in from the Developer MVPs. During Part 1, we extended sys_user, but received some feedback on the approach, so behind the scenes we created a new table that referenced sys_user with the Name field instead.


Fields:


Fun Fact 1 (String)

Fun Fact 2 (String)

Fun Fact 3 (String)

Website (String)

Social Media (String)

Bio (String - 4000 characters max)

Name (Reference to sys_user)

Name.Photo (Dot walking to sys_user)


Portal Experience


Next we created a Portal experience from scratch by navigating to Now Experience Framework > Experiences.



To create the Portal experience we used the Portal App Shell for the App Shell UI, and set up a UX App Configuration in the Admin panel.



Then we created a chrome_header UX Page Property to create a header for the portal experience.



JSON:

{
    "privatePage":{
    "searchEnabled": false,
        "userPrefsEnabled":true,
        "currentScreenLinkConfiguration": {
        "roles": ["admin"],
            "position": 250
    },
    "globalTools":{
        "collapsingMenuId":0,
            "primaryItems":[
            {
                "label":"UserMenu",
                "icon":"user",
                "type":"menu",
                "primaryDisplay":"icon",
                "value":{
                    "children":[
                        {
                            "label": {
                                "translatable": true,
                                "message":"Settings"
                            },
                            "position":100,
                            "type":"navigation",
                            "value":{
                                "type":"route",
                                "value":{
                                    "route":"settings",
                                    "fields":{

                                    }
                                }
                            }
                        },
                        {
                            "condition": {
                                "roles": ["admin", "ui_builder_admin"]
                            },
                            "label":{
                                "translatable": true,
                                "message":"Configure"
                            },
                            "type":"navigation",
                            "position":200,
                            "primaryDisplay":"none",
                            "value":{
                                "type":"external",
                                "opensWindow":"true",
                                "value":{
                                    "href":"/nav_to.do?uri=/sys_ux_app_config.do?sys_id=[SYS_ID OF YOUR UX APP CONFIG]"
                                }
                            }
                        },
                        {
                            "label": {
                                "translatable": true,
                                "message":"Logout"
                            },
                            "position":500,
                            "type":"navigation",
                            "value":{
                                "type": "AUTH_ROUTE_BINDING",
                                "binding": {
                                    "address": ["logout"],
                                    "params": {"reload": true},
                                    "default": "/logout.do"
                                }
                            }
                        }
                    ]
                }
            }
        ],
            "secondaryItems":[]
    }
},
    "publicPage":{
    "menuEnabled": true,
        "logoRoute": {
        "type": "route",
            "value": {
            "route": "landing",
                "fields":{}
        }
    }
}
}

We then created the chrome_menu UX Page Property to create a clickable link to the Game we'll create in Part 3.



JSON:

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

Landing Page/Data Set


Next we placed a Data Set component on our Landing/Home page. Here are the options we configured:


Title: Developer MVP Directory

Default view: Grid

Hide Filter: True


EVAM Definition


EVAM or Entity View Action Mapper is a data resource that can be used to display data within data set components. Our use case was pretty simple because we're just showing data from one table, but EVAM can be used to get and show data from multiple tables/data sources and configure multiple views of that data.


First, we created a EVAM Definition (Entity View Action Mapper (EVAM) > EVAM Definition) called Developer MVP.



Next we created an EVAM Datasource M2M by clicking Create and Link on the related list.


Name: Developer MVP DS

Table: [Our Dev MVP table]

Sort by: Created


The condition field is where you can filter out what data should be returned, for our use case we wanted to return all records, so this was left blank.



Next we created an EVAM View Config Bundle named Developer MVP VCB by clicking Create and Link on the related list.



We added a EVAM View Config on the related list named Developer MVP VC and added the fields we wanted to get from the Developer MVP table.



The last two things that needed to be done on the EVAM Definition was to configure the View Template named Developer MVP VT which is referenced on the EVAM View Config record, here's the JSON we used, but there is a template example when creating a View Template that you can use you configure your values:


{
    "component": "now-card-evam-record",
    "staticValues": {
    "highlightedHeaderIcon": {
        "translatable": false,
            "key": "clock-outline"
    },
    "highlightedHeaderBkgColor": {
        "translatable": false,
            "key": "moderate"
    },
    "imageType": {
        "translatable": false,
            "key": "avatar"
    },
    "detailLabelOne": {
        "translatable": true,
            "key": "website"
    },
    "detailLabelTwo": {
        "translatable": true,
            "key": "social_media"
    },
    "detailLabelThree": {
        "translatable": true,
            "key": "bio"
    }
},
    "mappings": {
    "highlightedHeaderLabel": "",
        "textHeaderLabel": "",
        "titleLabel": "name",
        "avatarURL": "name.photo",
        "subtitle": "",
        "subtitleAvatarName": "",
        "subtitleAvatarURL": "",
        "detailValueOne": "website",
        "detailValueTwo": "social_media",
        "detailValueThree": "bio"
},
    "actionMappings": {
    "mainActions": ["activate_user", "call_number"],
        "clickAction": "navigation"
}
}

The final step is to link an EVAM View Config Action Assignment M2M to the EVAM View Config record by clicking Create and Link.


Here we're creating an Action Assignment, and calling the navigation client action already created by ServiceNow in the Specify client action field. This should also be implemented as UXF Client Action so it will apply to Now Experiences.


Here's what the record looks like after the Action Assignment has been created and linked:



Data Resource


Now that we have our EVAM Definition set up, we need to call it on our Home page in order to link it to our Data Set component. This is done by setting up a Data Resource on the page. To get to Data Resources for a page, click on the icon at the bottom left that looks like a database or stack of discs, and click the +Add button. From there you can navigate to Global > EVAM Data Resource > and click Add. We configured the EVAM Definition to point to the one we created above.