Orlando Components LCHH Recap

#Orlando Release , #Now Experience , #User Experience , #Framework , #Live Coding Happy Hour

Brad Tilton

3 minute read

We have spent some time recently, through both blogs and Live Coding Happy Hour, diving into the Now Experience UI Framework launched in the Orlando release. Since we may not be coming back to that subject on the show for a little while I’m going to do a quick recap on what we’ve learned so far through the three episodes we’ve done on Now Experience Components and share some helpful resources.

Part 1: Setting up your environment and the counter example

Orlando Component Building - Live Coding Happy Hour for 2020-03-13 - YouTube

The first episode centered on a bright-eyed component n00b who thought he would have a component built and interacting with the ServiceNow db in the 45 minute timeframe of the show without even having his local environment completely setup. We ran into some issues getting now-cli working correctly and Andrew had to take over. Andrew ran through the counter example from the Now Experience UI Framework APIs documentation on developer site and we ended up with a working component.

I ended up getting my setup working by working through this npm doc and going back through the setup process described in the setting up your environment docs.

Here are some other resources to help you get started with your component building:

Part 2: Calling a ServiceNow component and iterating through dummy data

Orlando Component Building P2 - Live Coding Happy Hour for 2020-03-13

In this episode we started with a simple component that was just rendering static text in a div. We then showed how you can pull in an external, ServiceNow developed component into your custom component by pulling in the Button component running npm install @servicenow/now-button and calling it from our component. We then defined some example data and iterated through it using map().

Other Resources:

Part 3: Create a subcomponent, call it from the main component, and pass it data

Orlando Component Building P3 - Live Coding Happy Hour for 2020-03-27

In this episode we started with a couple of components from the last LCHH episode and some dummy data we iterated through. We then added the subcomponent inside our loop so it was called four times. It took a while to move to the next step, but we eventually passed some data from the main component to our subcomponent and successfully rendered the four meetup groups.

You can find the completed component we ended up with on my github at https://github.com/bradtiltonnow/lchhcomponent.

Conclusion

So that’s where we are at the moment with out Now Experience Components enablement from the Developer Program. We should be releasing a blog in the near future that will look at the Http Effect API and how you can leverage that to interact with ServiceNow data from your component. Don’t worry, we will also be revisiting components on Live Coding Happy Hour in the future.

Have you done something cool with components? We would love to hear about it in the comments!

Comments