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. For the TicketSeverity select Attribute Value as Reference representing and Id as Value property.

  • 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. Adjust the Security Settings​

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

7. 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 (there is a /api at the end) REACT_APP_JETVEO_API_KEY=v99XqQ83ZPDKe8OzkYGdbTFh0pkvif6j

  • Download and install nodeJs http://nodejs.org/en
  • 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).

8. Test the Connection​

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

You can see developer tools in your browser (F12) for debug details in tab Network in case you get an error message.

  • 400 bad request probably see message you do not have rights (go to point 6.)
  • 401 unauthorised, make sure you have correct API KEY (go to point 7.) you can turn on debug info on your Jetveo instance, under settings set Minimum log level to Debug

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.