How I'm Learning to Build Now Components

[Nia McCash]

With zero experience in React, Node, or any similar/modern Javascript frameworks, I found learning development for the Now Experience to be a daunting and somewhat overwhelming task, at first.

But, urged by the Hacktoberfest event, I pushed myself to learn and I am sharing my experience.  I hope this will help some of you in overcoming any trepidation you might have in learning the Now UI Framework.

The thought of building a complete, complex component was too intimidating a task, so I broke down the learning tasks into more achievable phases.

If you are not familiar with Now® Experience UI Framework, the following sites have resources to get you started (some of which are referenced again in this post):

1. My post on the WomennNow dev blog
2. @Brad Tilton's post on the ServiceNow Developers blog

It should be noted that for most of these phases of learning, I tested the component locally rather than on a ServiceNow instance. 

Phase 1 - Get your environment setup and develop your ‘hello world’ component. 

There are plenty of step-by-step instructions but @Dirk's Fast Track to your first "Now Experience UI Framework Component" was the one I found most helpful for me.

Phase 2 - Start to experiment with the out-of-the-box components that are documented on the Developer site.

The Developer site provides sample code that you can copy and paste into your component. Play around with static content for now. Can you render a provided Now Component as part of your custom component?

Three things I learned as part of this:

1. You need to install the component (via command line) so that it is available
   
   
   When you do this, you should see the folder in the ./node_modules/@servicenow/ folder of your project:
   
   
   
2. Remember to import the component:
   
   
   
   
3. Add the component to the “innerComponent” specification in your now-ui.json file. This is especially important for when you deploy your component to the instance. 
   
   Your component may work locally without this but I found mine had issues when I deployed the component to my instance without this part of the code.
   
   

Note: This guide is not meant to be a step-by-step, per se. If you managed to get the now-card component rendered, you may not want to stop there and move on to the next phase just yet. Experiment. Figure out what options you can change. Change them and see what happens. Learn how to put out-of-the-box components together. 

Anything interactive (eg. modal window that requires a button click to pop-up) will require more in-depth knowledge which I get into in later phases of my learning.  For this phase of my learning, I just wanted to see if I can leverage and display some out-of-the-box components in my custom component.

Phase 3 - Learn to fetch real data from the instance 

I learned by looking at examples.  There are a few examples available that show how to retrieve data from an instance via the REST API: 

1. CCW2095 has an example but I found it to be a bit more complicated than I would have liked. 
2. Brad Tilton' s To Do application also has some examples of REST API calls to the instance. (Note: I link an older version of the repo because it is a simpler version and sometimes, that means easier to understand and digest. The newest version of the repo may also prove to have some great examples). 

Looking at the 2 examples, I learned to use the Now UI Frameworks’ createHttpEffect from @servicenow/ui-effect-http in order to fetch real data from an instance. For this phase of learning, you’ll want to also be somewhat familiar with ServiceNow’s REST API explorer.

I started with something simple - fetch a single record’s data from the instance. I picked a ServiceNow table and the sys_id for a record in that table. 

You can hardcode the table and the sys_id for now because the goal is just to retrieve data from the instance successfully and learn how to receive it and display it as part of your component.

To display the data from the instance in the component, you need to update the state.

I learned mostly by trial and error. I learned that I could do a console.log in various parts of the code to help me see what’s going on. 

I’m sure there are more elegant ways of learning. If you prefer to learn by understanding and building on  main concepts, you can refer to the relevant documentation on the HTTP effect API, action handlers, and managing component state.

Phase 4 - Learn to parameterize 

After learning how to fetch data from an instance and display it in various parts of the component, I had to figure out how to parameterize the information that may change, like the sys_id.

For this, I refer to examples again like this bit of code from Brad's To Do component. 

Above, I mentioned where you can find the downloaded out-of-the-box components that you can use as building blocks. You can also open the code for those components and use them as examples.

Here’s a snippet of the properties definition from the now-icon component, which you can map to how they are used and declared.

Relevant documentation include the concept of Component Properties.

Phase 5 - Learn to work with and create (more) Action Handlers

In fetching data from an instance, we’ve already worked with action handlers but now we can do more of it. Some things you can try to enhance your learning in this phase include:

• Learning how to react to a button click to change something that is displayed. The now-modal component is good for this exercise. Learn how to open and close it based on some action. 
• Learning how to send data to the instance. Take data from an input component and use the knowledge learned on using the createHttpEffect API to write data to the instance.
  
  

Good luck and happy learning!

That’s the end of this guide for now. 

Obviously there are a lot of other concepts (as listed in the Main Concepts section of the Developer’s Reference and beyond) that I haven’t touched on and that I am still learning. You can too!

My Code Example

The working component code that I put together based on the above learning can be viewed on GitHub.  Here’s a link to the repo at the time this article was posted.

Contributions to the repo are welcome - as part of Hacktoberfest or otherwise.

Note: Because component development currently uses a scope that is your development instance (eg. x_12345 for a Personal Development Instance (PDI)), my code (which currently references my PDI scope) may not work as is, if you try to deploy to your instance. However, the code should work locally (via now-cli develop -o command on your local machine). 

If you found the above helpful, please let me know below.
Feedback, comments and/or additional resource links are also welcome.

[Mwatkins]

Thank you sooo much for posting your experience! I am also in the process of getting up to speed on developing with components on Now Experience with similar background.

Liking/sharing/bookmarking!

[Nia McCash]

Thank you for your feedback and for sharing. I'm so happy that you are finding it helpful.

[DirkRedeker]

Hi Nia

Great article! I will have a look at your repo during the next days.

Thanks for sharing!

Also thanks a lot to you for linking my article above in your article!
I am happy that it helped you on your journey.

Move on and let us know how you advance.

Have fun & build something awesome.

BR

Dirk

[Vivek Verma]

Thank you so much for the guidance, 

I have also started learning Now Experience Development, but I was overwhelmed with the development process.

Then I switch to the learn React first.  But that was quite lengthy, and somehow I lose my interest in it. 

But now I really charged up and going to follow your approach. 

Thanks,

VIVEK | Medium | LinkedIn

[Nia McCash]

Thanks Vivek.  You can do it!  And if you have any questions, I have found the SNDevs slack community to be helpful. You can also find me there.

[Nia McCash]

Thank you, Dirk. Your articles have been helpful and inspiring.

If you haven't seen Dirk's second article, check it out --> Now UI Experience Part #2 - Workshop: Using multiple Component nesting & Parameter passing

[niedziel1]

Thank you so much for sharing this well thought out approach to beginning to develop custom components.  I very much appreciate your phased strategy.

For anyone interested in learning more about building components for the Now Experience UI Framework, you can find custom component training on the ServiceNow Developer Site.  

[Konstantinos Nt]

I just wanted to say thank you, because i didnt know you can JSON.stringify and console log the action output and that saved me after 3+ hours of trying to debug. I thought you dont have the ability to be 'elastic' inside of the action handlers. Great post, thanks for sharing it!

[Nia McCash]

This makes me happy - glad I was able to help. Thank you, Konstantinos!

[Robert Fedoruk]

This question is sure not to win me any friends but...

How is this framework going to scale across the ecosystem?

I mean... I'm not a real dev, but I'm not THAT bad a dev, and all I see is the community's BEST and brightest creating tutorials for themselves.  The ramp up time for the cream-of-the-crop has been what... months?

[vkambham1]

Great article!! It is very helpful Nia!

Do you know if we can build custom components using external React libraries? i.e. are we limited to developing custom components using existing Now experience components?

Thanks in advance.

[Nia McCash]

@vkambham1 I don't know the answer to that. Try checking out the resources in the Next Experience Center of Excellence or post a question there to inquire.