Model and Storage

Ionic 4/5 Model and Storage.

Model

Models can simplify development by defining complex app data structures. In general, a model allows you to mimic real-life scenarios in your app.
Generally, it is a custom data structure type that can be used to create new objects based on itself. Variables that are stored in certain storage can also use models as structure templates.
For instance, if you are building an app that has a map with a location markers list, you can define a Location object and a LocationsList array.

Here’s where the storage feature comes in. Let’s say your app displays the markers on the map, and you need to keep (save) the data somewhere in the app. A single location or a collection of locations can be saved into storage.

To define models and/or storage, go to Project > Model and Storage.

Under the Model tab, type a name for a new model item and click Add. Then create the data structure you need by clicking Add (cloning existing model(s) can also be used) and specifying the names and types:

19001900

📘

Model Cloning

The Clone feature can be used to simplify creating a replica model that can be later modified:

18931893

Model Import

The Import functionality gives the possibility of updating the existing model structure from JSON data.
To update the existing model, click on the Import button from the buttons bar of the existing model which should be updated.

📘

Data for updating should be in JSON format.

18711871

Data should have the same structure as the model to be created.

Every model property type (Object, Array, String, etc.) is defined automatically from the value of the same property in JSON data.

Import doesn't replace the existing structure of the model but updates and extends it:

  • property is updated when its type is changed;
  • property is added if the model doesn't have a property with the same name.

All child properties will be removed if the type of parent is changed.

Export Server Response as Model

This functionality gives the possibility of creating a model or updating the existing model from a service response.

Service response can be exported only if its Response Data Type is set as JSON (option in service Settings):

13521352

Export is available on the Response > Body tab of the service editor:

19021902

To export the structure of a service response as a model click on the Export button from the buttons bar of the response root element.

There are two export options:

  • create a new model (name of a model should be entered);
  • update the existing model (model is chosen from the drop-down):
18691869

Update Existing Model

Export doesn't replace the existing structure of the model but updates and extends it:

  • property is updated when its type is changed;
  • property is added if the model doesn't have a property with the same name.

All child properties will be removed if the type of parent is changed.

Export Arrays

If the response is an array (the root element of the response has Array type) and its [i] element has the Object type, there is an additional possibility of exporting the [i] element as a model:

15751575

Supported Data Types

Models can be of Array or Object type.

When defining a model, you can use the following data types to specify the type for a specific model field:

  • String;
  • Boolean;
  • Number;
  • Array;
  • Object;
  • Any.

Storage

Storage is a virtual client-side environment where any data can be stored. By using models, data can be stored in specific storage based on the chosen model structure. Depending on the chosen storage, stored data will be accessible for different amounts of time.

When you are done defining the model structure, you can also create a storage variable with a matching type. To do it, switch to the Storage tab and create a new storage variable item.
Note that, in our example, there are now Location and LocationsList types in the Type drop-down list. That means that these storage variables will contain the same structure as the model:

19081908

Storage Types

There are 2 storage entity types you can choose in an Ionic 4/5 app:

  • Storage – storages of this type are stored in the IndexedDB database of the system browser (Safari (iOS) or Google Chrome (Android)). It means that they persist even after a user closes the application or restarts the mobile device. However, if the browser cache is manually cleared, this data will be deleted. This storage type is best for storing the last viewed items, e.g. last viewed products to show after an app user returns to the application.
    Storage works in an asynchronous way.

  • Variable – storages of this type persist between pages and are cleared after a user exits the app.
    Using this storage type is recommended for the cases when you need a global variable to be used for different app pages, e.g. if a user selects a product and you need to show its details, show product edit screen, or other product-related screens.

🚧

Changing variable type and custom code!

Please note that if you once create a variable of the Storage type, use it in some custom code and then decide to change it to the Variable type, making corresponding changes into your code will be required since such changes may affect the work of existing code snippets!
So, if the existing function was once created under the CODE > Functions tab using snippets, make sure that you manually edit the code everywhere it is used in the app.

However, if it has been created by mapping, these changes will be applied automatically.

📘

Get variable/ Set variable/Get from storage/Set to storage Snippets

We also offer snippets that can be used for setting and getting global variables for your project. Click the links below to learn more:

Storage and Variable Mapping

In Ionic 4/5, mapping is also available for binding models and storage variables.
If a storage variable (Storage or Variable) is added under the Model and Storage > Storage tab, it will be automatically added to the service on any app page and can be used for any service:

15941594

For example, a new storage variable, dish appears on a new app page service automatically and is ready to be mapped:

15971597

However, the variable(s) created for a specific page under its CODE > Variables tab

929929

can be used for this specific page only:

15971597

📘

Want to know more?

You might also like our detailed instructions on how to use mapping for defining the Visible or Disabled UI components properties.

Best Practices

Suppose we have the database collection TravelList with the following structure:

12381238

Database collection.

It’s easy to create a model Location with the same structure:

13291329

App model.

Then, you can create a storage variable based on the model structure:

13471347

App storage variable

Now, when you use the service to get the TravelList collection data, you can map its response to your storage variable, as in the following:

13391339

Mapping.

This approach will be effective only when you need to get a single item for the TravelList collection. To get the whole list of customers, you should create another model with the type of Array and array items type as Location:

15431543

App model.

Note the second model with the name LocationsList. Now, you can change your storage variable type to LocationsList.

After the following mapping is created, the storage variable travelList will contain a travel list array:

13461346

Mapping.