ServiceNow Integration with Open Food Facts

Introduction

One of the most important topics in ServiceNow usually is it's ability to get Integrated with other 3rd party applications.

But we usually do not try to get in-depth of the things we actually aim for.

As a disclaimer, this is an example of pure customization. Because that's how we learn. For customers, it should be more OOB way but for us it is more of a customized way (especially when it comes to Service Portal).

Complete Integration Flow

This is how I integrated Service Portal with an external Open Food Facts API :

Requirement

If I talk about the requirement or the major goal here, it is to fetch any type of Food that is present on that Food website. That will allow me to make a decision whether that food is healthy for me or not. How? Because it will fetch the type of things that food contains - Food, Sugar, Saturated Fat, etc. and that too how much quantity you can consider for this whole analysis.

Steps to be checked

To keep things easier, as a first step this is what you need:

▪️ APIs

https://world.openfoodfacts.org/api/v0/product/[barcode].json

https://world.openfoodfacts.org/cgi/search.pl?search_terms=apple&json=1

https://world.openfoodfacts.org/api/v0/product/[product_id].json

▪️ Parameters : search_terms The term you want to search for, json should be set to 1 to get results in json format

▪️ Http Method

▪️ Service Portal Knowledge (ServiceNow)

▪️ To access this API, no authentication was needed

Process

Okay, let's deep dive into the process now :

1. I created a new Search Source for this new Service Portal that I have created and made an API Get call to retrieve the data.

2. I have customized the search related widgets (search, typeahead search and faceted search) for this specific requirement because of multiple reasons :

a) I wanted to display the results on the same page (Homepage). Usually the results are being displayed on the next page after we hit enter on the Search.

b) I want to modify the feel and look (via CSS)

3. Next step, I created a custom widget to display the results via an API. But the catch is we cannot display the results via the same API that was used in Search Source.

Now you must be wondering why?

Because when you search something, it brings you a bunch of results based on a specific query keyword but when you click on one of the search results, it only displays the details of that specific product only.

4. I created a loader class in CSS to enhance the way results are being loaded on the Service Portal.

Well who doesn't like things classy!

5. After configuring the widget, I added it to the homepage by doing some modifications in the margins.

6. Now the most important thing - calling this widget only when we click on one of the search results from the panel. So we need to communicate between the two widgets.

What kind of communication am I talking about? A simple if else using ng-if (or ng-show) in the HTML template while loading the page and then clicking the search result.

When the homepage is opened :

When the search result is there and we click on it :

After the search result is being clicked :

Challenges

So the only challenge that I can think of here is related to the customization and I have cloned some very basic OOB widgets because the ask of this project (or what I intended) was to display the results directly on the homepage of the service portal.

And I followed these resources whenever I was in doubt :

Helpful Link : 1

Helpful Link : 2

Play Around with this API

As you can see that the results that are being returned shows up the complete details of the food item which includes Fat content, Salt, Sugar and much more. In the meanwhile you can play around with the ingredients, palm, vegan, vegetarian, etc. as well.

Conclusion

So, this is the design that I have followed and customized multiple widgets. This project has helped me build a robust design along side implementation not only with respect to ServiceNow Integration but also Service Portal.

If you found some value out of it, you can find me here as well :

LinkedIn : https://www.linkedin.com/in/syed-taha-kamal-ahmad

Twitter/ X : https://x.com/Syed_Taha_Kamal