Objectives
- Understanding the relationship between maps and web apps
- Learning to create an app
- Understanding the role of forms in the platform
- Learning to create custom forms
- Learning to share a web app with the public
Prerequisites
- Having completed and understood the previous tutorial on maps
What is the relationship between maps and web apps ?
The Web Apps section allows the user to begin with a Map, then add extra functionalities with the help of various tools, such as a data viewer, a search function, a print function, etc. It is a powerful tool enabling analysis and serves as a collaborative platform since web apps can be shared and edited in real time by multiple users.
How to create a web app ?
To create a web app, click on the [+] button in the top menu, then select Web Mapping Application.
In the new window that pops up, enter a significative name. In this case, we will name it Application_wards.
To create an App, this first step will be to select the Map that will be used. In the "Map" dropdown list, select the Tutorial_wards map we created in the previous tutorial.
The next step is to select the tools that will be available inside the Web app. To add or remove a tool, simply check or uncheck the corresponding checkbox. In our case, ensure that the "Data source browser" checkbox is checked, which will enable the display of all the rows contained inside our data sources. Then, click on the "Create" button at the bottom of the page.
Application_wards will be created. Select it in the Web Apps catalog, then click on the "Play" button in the menu.
Oops... the platform displays an error! But why is that? The error pops up because there is a missing configuration inside the form linked to our Points of interest data source.
What is the role of forms inside the platform ?
Forms are attached to data sources and allow their configuration in multiple ways through the JSON structure. They are, among other things, responsible for the window that displays data when clicking on a record of the Map and for some configurations in Web Apps.
How to create a custom form ?
As indicated by the error message when opening our Application, the data sources present in the Map do not have the option "browsable": true specified in their default Form. We will then have to add it manually.
Click on the "Cancel" button, then click on the Form link in the "Edit Form" column of the Points of Interest data source.
In the new window that opens, we can now see the name of the form, its description, as well as its configuration in the JSON format.
Note: This tutorial will not go into details about the structure and all the possible options of Forms. For more information, read the platform's documentation (UserName> Documentation > Forms).
Let's begin by solving the problem of data browsing within our Web App. To do this, navigate to the bottom of the configuration, then add the following line:
,"browsable" : true
Click on the "Save" button at the bottom of the page, then return to the Application_wards application. Notice how the error message has been replaced by an empty window. This is normal since our Points of interest data source is currently empty.
Locate the [+] button that appears on the Points of Interest data layer. This button is used to add new records to the data source (in this case, a new point).
Click this button, then click anywhere on the map to create a new point. Note the controls on the form and the different fields.
We will type in the following values:
- Name: Statue
- Description: Marble
- date_construction: 1950
- uuid: leave it at -1
Once done, click on the "Save" button to validate. Another error appears!
Do you remember when we created the Points of interest data source in the first tutorial? If we go back to see the structure, we will see that the field date_construction is of the [date] datatype , whereas it is presented in the form of a textbox in our form!
It is therefore necessary to edit our form to comply with our data source. To do this, click on "More ..." in the top menu, then select Forms.
Find and select the Points of Interest - Base Form in the catalog, then click on the edit (pencil) icon in the right panel. In the form's configuration area, identify the part related to the date_construction field.
Note that each field has the following configuration:
- label -> represents the label displayed in the form
- name -> represents the name of the field in the database
- type -> represents the type of control used to enter the information
So, in this case, we will replace the type of the date_construction field :
"type":"text"
by
"type":"date"
As such, the form will now enforce the right type of data required by the data source by displaying a calendar control. We will also delete the section displaying the uuid field since we do not want it entered manually. To do this, simply select this text and then delete it from the JSON configuration.
Note: Be careful to also remove the comma from the closing bracket of the date_construction field (just under "type": "date") to avoid a JSON error, as shown in the image below.
Once completed, click on the "Save" button.
We will now return to the Web Apps section and launch Application_wards. Once done, click on the [+] button of the Points of interest layer and add a point on the map.
We can now notice the disappearance of the uuid field and the presence of a calendar control on the construction_date field in the form.
Enter your desired name, description and construction_date , then click on the "Save" button. This will have two effects: the appearance of a point on the map and a new line of data in the left pane.
How to share a web application with the public ?
Now that the application is completed, it would be interesting to have teammates who can add new points to the map. For that to happen, it would be convenient to be able to share it so that it can be accessed without having to log into the platform.
To accomplish this, click on Web Apps in the top menu to return to the catalog, then select Application_wards. In the right pane, click on the "Manage Spaces" button.
In the window that pops up, click in the text box, then select the "Public" space. Once completed, click on the "Save" button.
The application is now publicly available: all you have to do is share it with a hyperlink. In order to obtain it, click on the button "Share web application", then copy the link.
The only remaining step is to send it the desired people and they will have access to the application directly from their favorite web browser.
Summary
In this section, we have detailed the relationship between Maps and Web Apps within the platform developed by Mapgears.
We also saw how to create, customize and share a web application with the audience.
Finally, we learned about the relationship between data sources and forms and how to customize them.
For more information on the Web Apps section, move to the documentation of the platform at YourName > Documentation > Web Apps.
Questions or need some precisions? Contact us at support@mapgears.com
0 Comments