If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Introduction

A model helps define the data structure for an app in order to simplify development. In general, a model allows you to mimic real life scenarios in your app. For instance, if you are building an app that has reviews about cars, you can define a “Car” object.

Here’s where the storage feature comes in: Let’s say your app shows reviews about five cars, and you need to keep (save) the data somewhere in the app. A single car or a collection of cars can be saved into storage.

Go to Project > Storage And Model to define models or storage variables.

Type a name for new entity (model) and click Add to create it:

js_model_add_entity

Create the data structure you need by clicking + and specifying field names and types:

js_model_entity_fields

When you are done defining the entity structure, you can create a storage variable with a matching type. Switch to the Storage tab and create a new storage variable:

js_models_add_storage_variable

You will see that there is a todo type in the Type drop-down list. That means that this storage variable will contain the same structure as the model.

Model

A model is a kind of a custom data structure that can be used to create new objects based on itself. Variables that are stored in a certain storage can also use models as structure templates.

Go to Project > Storage And Model to create a new model and specify its structure.

Here is an example of an imaginary customer structure:

js_models_customer_structure

Supported data types

Model can be type of Array or Object.

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

Model API

Method summary

Method Description
getModel(modelName, defaults) Reproduces specified model structure in object.

getModel

Reproduces specified model structure in object.

Parameters

  • modelName – name of the defined model to reproduce.
  • defaultsplain object that is used to extend object structure.

Examples

To create an object with a predefined structure based on a certain model, use the following method:

The following code will reproduce the customer model structure in customerObject:

By using the optional defaults parameter that receives a plain object, you can extend the final object structure:

In the case of a nonexistent model specified in the getModel(...) function, the following error will occur:

Storage

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

Storage types

There are 3 storage types you can choose in Appery.io:

  • localStorage – Data stored through localStorage does not expire and remains stored on the user’s computer until an app deletes it or the user removes it through the browser settings.
  • sessionStorage – Data stored through the sessionStorage has the same lifetime as the window or browser tab, which means that when the window or tab is closed, any data stored will be deleted.
  • Window – Variables in Window are the same as the simple variable of root window object. That means that data stored in Window can be accessed the same way as the window variables. The lifetime of such variables are the same as the window lifetime (and sessionStorage variables lifetime).

Read more about HTML5 Web Storage via the link.

Storage API

We strongly recommend that you use the Appery.io Storage API when working with storage variables. Such an approach will guarantee that in the case of any changes on our side, the efficiency of your apps will not be affected.

Method summary

Method Description
get(path) Returns value of specified storage variable.
set(value) Replaces value of specified storage variable.
update(path, value) Updates specified storage variable by provided path with specified value.

get

Returns value of specified storage variable.

Parameters

  • path (Mapping Expression) – returns specified object field (Optional).

Example

If storageVariable = {"FirstName":"Sam","LastName":"Winchester"}:

If storageVariable = {"users":[{"FirstName":"Sam","LastName":"Winchester"},{"FirstName":"Dean","LastName":"Winchester"}]}:

Use the following code to get an array item by dynamic index:

Use the following code to obtain a model name from a storage variable:


set

Replaces value of specified storage variable.

Example

If storageVariable = {"FirstName":"Sam","LastName":"Winchester"}:


update

Updates specified storage variable by provided path with specified value.

Parameters

  • path (Mapping Expression) – path in form of Mapping Expression to value that should be updated.
  • value – new value.

Example

If storageVariable = {"FirstName":"Sam","LastName":"Winchester"}:

This code uses a JavaScript variable to update an object property:


Mapping Expression

The Mapping Expression is a feature provided by Appery.io that is similar to JSONPath. But unlike JSONPath, the Mapping Expression makes it possible to read and write values by the specified path.

Let’s say you have the following object:

Using the Mapping Expression, you can retrieve only certain fields instead of the whole object:

To retrieve a more complex structure as an array, use [i] identifier. In that case, an array will be returned.

Let’s say you have the following object:

You can provide a specific array index instead of [i] identifier to return a specific array value. In that case, a plain result will be returned (not an array):

See how to map data to or from storage variables here.

Best practices

Let’s say there is a customer collection in the database with the following structure:

js_model_customer_collection

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

js_models_customer_structure

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

js_model_storage_customer

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

js_model_single_customer_mapping

Mapping is described here.

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

js_model_customer_array_model

Note the second model with name customersArray. Now you can change your local storage variable type to customersArray:

js_model_customer_array_storage

After the following mapping, local storage variable customer will contain an array with customers:

js_model_customer_array_mapping