TM1 Rest API – CRUD App – 1st Chapter

As we all know Representational state transfer (REST) Application programming interface (API) can perform Create Read Update Delete (CRUD) operation. This article will discuss how to create web-based application to perform basic CRUD operation using TM1 Rest API. My previous articles discussed on how to enable Rest API with Tm1py but in this article we will discuss on how to build an app using Reactjs framework with API calls.

But before we dwell into the specifics, a brief about APIs – a quick analogy – in a restaurant kitchen is the back end (TM1 database), Customers are front end (PAW, PAX) and wait staff (APIs) are the communication between back end and front end. Since TM1 database is exposed with Rest API we can have any front end based on developer’s choice.

Why React? Top ranked and fastest growing front end. Check it out on hotframeworks.com. however, it is not meant that it is the right one as they are plenty of frameworks out there. I have used it as it was easy for me from my academic background.

choreManager - https://github.com/akramalipa/choreManager

?Managing TM1 chores with a simple interface - Often times, chore orchestration is tiresome tasks as it involves pre-dependency checks. It gets more complex when an extract file from one TM1 server should be available to another server’s import process in a chore (although there are other means to achieve this – but the focus is only through chores) Usually an analyst or tm1 admin goes through the chore timings and its frequency. This comes down to deactivate the chore to check or go to the file system and check .cho file and decipher it.?

Final Application

The below screen snip is the application end state which shows the list of chores in a tm1 server (once logged in) on the left hand side and the details of each selected chore on the right (ex: Load Budget in the snip). The right side also contains activate/deactivate button based on the current state and execute button. ?This article will take us through how to build this simple app and in this chapter it will focus just on READ operation.

Project setup

Run this code in your command prompt to create a new react app.

npx create-react-app choreManager

then cd into the app:

cd choreManager

run?yarn start?or?npm start

You should see the react logo spinning in the default browser.

Copy the code from github– as the code is not yet optimised, the api calls needs to be updated (server and port) where there is a fetch command.

GET Request (READ)

How to get chores list and display in the screen?

Using Rest API the operation can be completed with simple GET request. Open the App.js file and inside you should see the below code:

In React

1.?????UseState accepts current state (chores) and a function that updates the state (setChores).

2.?????useEffect will be executed on the first render- which will get the chores and store it in setChores (state updated) variable.

3.?????I am passing the current state (whatever is fetched from the API) of the chores to the component (chore-lists.js) as per below

Inside the component folder open chore-list.js and you can see the below code:

The red outlined code displays the chore name. Props stands for properties (chores) which is sent from App.js file.

The above code checks if the chores are empty and then loops through the list of chores to display just their names.?

The next chapters will discuss on the following:

1.?????Create (POST) a new chore.

2.?????Update (PUT) an existing chore (Activate or Deactivate)

3.?????Delete an existing chore

4.?????Log in, log out, how to hold session cookie and future enhancements to the app.

Credits : Tm1py code and documentation