Skip to main content

(13) CRUDL API – Front End

- Support Ticket Tutorial -​

Saving Data from a Front-end Interface​

Jetveo creates back end foundations for many applications. The process to save data from a front end into the back end can be done through a React application. For example, a user can enter information into a form through a front-end user interface and that data will be saved in the database on the back end.

This tutorial will show how to connect a simple front-end application, which will be downloaded as a React Starter, to the Support Ticket tutorial. Data will be transferred via CRUDL API Services.

Custom-made front ends will need to be created to match different back ends.

Note: Some of this set-up information was provided as part of Step No. 12; please verify that it has been done correctly.

1. Create a Technical User​

  • Go to Config > Technical User.
  • Create a new tab; click (+)
  • Enter API User
  • Click Finish

2. Establish the CRUDL APIs for the Ticket Entity​

  • Go to Integrations > CRUDL APIs

Establish the Settings.

  • Create a new CRUDL API; click (+)
  • Verify that Root Type is: Entity
  • Set Entity as Ticket
  • Verify that Service Name is set to: Ticket
  • Set Allowed Technical Users to: API User
  • Click Finish

Establish the API Actions.

  • Click the Create checkbox.

  • Select the attributes that will be imported from the front end; click each applicable checkbox and click OK on the popup dialog box to approve the way the name will be shown. In this case, select Description, Title, and TicketSeverity.

  • Click CTRL + S to save the tab.

3. Establish the CRUDL APIs for the Ticket Severity Codebook​

Create another CRUDL API; click (+).

Establish the Settings.

  • Create a new CRUDL API; click (+)
  • Set Root Type to: Codebook
  • Set Codebook to: TicketSeverity
  • Verify that Service Name is set to: TicketSeverity
  • Set Allowed Technical Users to: API User
  • Click Finish

Establish the API Actions.

  • Click the List checkbox.
  • Select the attributes that define the checkbox: ID, Code, and Name. Click each applicable radio button and click OK on the popup dialog box to approve the way the name will be shown.
  • Type CTRL + S to save the tab.

4. Establish the API Settings​

  • Save all of the tabs and Release the app.
  • Go to the App Overview.
  • Update the instance to which you want to connect.
  • Go to instance Settings. Select the API tab.
  • In the API User row and the Actions column, click + Generate key. This is the API Key. It will look something like this: BO0BqvxVhZNBU6QlahcGQhsq8H2p3ETO
  • Click Save

5. Establish Complete URL​

On the App Overview, click All Instance URLs. Copy the URL. Add “/api” to the end. It will look something like this: https: //5fcfd7f7-3832-4143-9da1-99bad5e72f9e.eu.jetveo.io/api

6. Download the React Starter (these files include javascript and typescript)​

  • Go to https://github.com/jetveo/jetveo-crudl-api-client-example .
  • Click Code and select Download Zip. This will download the React Starter to your local drive. It may take several minutes.
  • Unzip the file and open it in an IDE, like Visual Studio Code.
  • Go to JETVEO-CRUDL-API-CLIENT-EXAMPLE-MAIN > .env
  • Update the text with REACT_APP_JETVEO_API_URL and REACT_APP_JETVEO_API_KEY

It will look something like this: REACT_APP_JETVEO_API_URL=https: //5fcfd7f7-3832-4143-9da1-99bad5e72f9e.eu.jetveo.io/api REACT_APP_JETVEO_API_KEY=v99XqQ83ZPDKe8OzkYGdbTFh0pkvif6j

  • Open the terminal and type: npm install . Make sure to use the proper location of the downloaded files.
  • Then type: npm start

This front end will exist on your local machine. If necessary, it can be made live on a dedicated cloud (e.g., Vercel, Netlify).

7. Adjust the Security Settings​

  • Go to Security > Data Access.
  • Locate the Ticket row. Click Edit
  • Uncheck Security Condition For CREATE
  • Click OK

8. Test the Connection​

On the local front end, enter the Title, Description, and the Ticket Severity. Click Send Contact.

Ensure that your user has a security claim Can List All Tickets.

Go to the Jetveo app to see that the information has been moved correctly.