Sample Application
Last updated
Last updated
Create a custom application on the platform
On OBTO platform, it is quite easy to create an application. In this documentation we will be making an ISSUE TRACKER application. Follow these steps to create an application: -
On the navigation bar, navigate to Configure > under Configure navigate to App Manager.
The App manager application opens up.
Click on create to create an application and the modal form opens up.
Provide Name and Description of the application and check what do you want to include in your application (UI Template, Client Policy etc).
Now you have successfully created an application.
To access your application, refresh the page and you will see your application listed there. Click on view, it will navigate to a new tab and open your application.
Now it’s time to put some code into this application. We will start with UI TEMPLATE (HTML).
To access UI TEMPLATE: -
Navigate to Scripts > UI Templates.
Right click on this row and click Edit.
Form to edit HTML opens up.
Below image shows only the half part of the form. Select mode as HTML and then just start writing the HTML.
Below image shows the other part of the form to write CSS. Select mode as CSS.
Now in this editor, we will build a form to create an issue.
Let’s add some HTML in it. Below image shows the HTML form we have created for issue tracker application.
Now you would be thinking where is the <!DOCTYPE html>, <head> , <body> tags. Don’t worry it has been automatically handled by the platform. You have to just write the main part of the HTML. That means the part inside the <body> tag. Remember your application is running inside the platform as a directive.
Below image shows how the form looks on the platform.
Let’s write logic to submit this form.
The logic to submit this is form will be written in CLIENT POLICY.
Let’s add some code to this CLIENT POLICY. Below image shows the form logic in the CLIENT POLICY.
So, this client policy is basically a controller (A normal AngularJS controller).
‘obto' contains the AngularJS objects and APIs like scope, http, rootscope.
$scope.issue object contains the form data linked through ng-model concept in AngularJS.
We are setting the issues’s status to new and priority to low by default.
$scope.createIssue is a function that gets called when clicked on ‘Create Issue’ button.
Also notice that we are using async await concept which means platform provides the latest javascript features.
Inside HTTP POST request the url - ‘createissue.bto’ point to a REST API that we will discuss later in this documentation.
Now in order to save this data we need a Collection (Table).
Follow the steps to Create Collection.
Now a Collection (Table) needs fields (Columns). Follow the steps to Create Fields.
Below image shows the collection named – pltf_issue_tracker (use this snake_case convention to name collections).
Now in order to save data to this collection we need a REST endpoint which is called ROUTE which is ‘/createissue.bto’ as shown above.
Follow these steps to create a ROUTE.
Below image shows the route created to save data to the collection – pltf_issue_tracker.
In the above code, you can see it’s normal NodeJS code.
At line no. 3, domain is what you create when registering to the platform.
Issue is the request payload which contains the issue information.
We attach domain property to issue information as data in database is separated on domain basis.
At line 23, we use database driver (behind the scenes it uses native mongo db drivers) provided by the platform.
We pass to it the name of the collection - ‘pltf_issue_tracker’, data to save - ‘issue’, createOptions which is just additional configuration you want while saving the data and at last comes the callback which gets called when the database operation of inserting a record is completed.
So, at last, let’s use the application and create an issue.
Let's fill up the form.
And the Issue has been successfully created.
Let’s see if the data actually got saved in the collection.
Yes, it got saved.
You can see the short description, description, status, priority.
So, that’s it, this was whole tutorial where you learnt how to make a custom application on the platform and you saw how smoothly and easily you can create an application.
