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):

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.

Labels:

• Now Experience UI Framework