Menu Icon

Displaying and Creating Data

Get data from internal databases, APIs, and forms

Once you add components to your page you can connect them to your data. There are several different data sources you can use for displaying data.

Display Data from an Internal Database

Code2 comes with an internal database you can use for your web app. In order to use it, you need to create a data model that best represents the data you want to display.

Creating a data model

On the left-most icon menu in the editor, click on the Data Models icon.

Now click on the "+" icon next to "Models" on the topleft of the screen. In the "Create New Model" dialog, you can enter your data model name and its fields.

You also need to choose the types and details or sub-types for your fields. Once you do that and click on "Create Model", you will be able to use the internal database for your data.

Adding data

If you click on the "Data" tab next to the "Fields" tab, you can click the "+" icon to add new data to your database.

You can now display this data when your users open your app. But first you have to create a way for your users to see the data.

Displaying the data on your page

Now that you've created your data model, in order to see the data on the app you need to connect your data models to the components on your page. There are components that allow you to connect data sources to them, such as tables and lists. We'll use tables for our examples here.

Connecting the data model when adding a new component

When you add a table to the page, there is an option to "Create Columns from DataSource". With this option, you can convert your data model to a table right away.

After selecting "Model" for your data source and choosing your data model, you can select which fields you want to display as columns for the table. Once that is done, the created table will automatically display the data from the model.

Connecting a data model to an existing component

Alternatively, if you've already added a component to your page, you can connect it to a data model using its rightmost panel in the editor. After selecting a table that you've added to your page for example, you can add a data model from the panel by clicking on "Choose Model". Once you pick the data model, the table will display data from the model.

Adding data from your users (forms)

When you are adding a table to your page, after creating the table, the wizard lets you create a form from the table right away.

Once the form is created, select your table or data component on the page, and toggle "Enable Data Operations" in the rightmost settings panel. For the "Data Form" you can select the form you just created and toggle the Create and Update options. For the "Row Key Field" select the field that provides a unique ID for the data.

You now need to connect the form to the data model as well. Click on "Pages and Data Forms" icon on the leftmost icon menu in the editor, and select the form you just created ("form1" in our example).

Next, in the Data Sources settings in the rightmost panel select "Choose Existing Model" and select the data model you used for your component.

To finish this step, map the form fields to fields in the data model.

Now you can test to see if your form works. Go back to your page by clicking the "Pages and Data Forms" icon on the leftmost icon menu again and select the page you were designing. Now click on the Page View or App View to try out your app.

Creating a form from a data model

Alternatively, you can create forms directly from a data model. Click on "Pages and Data Forms" icon on the leftmost icon menu in the editor. Then click on the "+" icon at the top next to "Pages" and select the Data Form option.

On the form screen, Select the "Create from Model" option for your form and pick the data model you want to use. You can then choose the fields you want to add to your form by checking their boxes.

Now you need to connect the form to your data component, as described before. After creating the form, select your data component (e.g. a table) on your page. On the settings panel of the component, make sure "Enable Data Operations" is toggled on, and select the data form you just created. If the "Create" and "Update" options are toggled, your users will now be able to add data in your web app. You can see if entering data works by clicking on the Page View or App View and trying out your app.