Using data objects

Data objects are a key component of SynergiWeb applications. They are stateful data stores that use either the Data API or article data objects to run CRUD operations on views.

There are two primary ways of creating data objects: using the Article AppDesigner or Data API resources.

Appdesigner data objects

To easily configure your data object, use the Appframe Appdesigner Data Object Editor. This UI allows you to select views, columns, sorting options, max records, and paging settings. Once configured, from the app directory run pnpm generate-types to generate TypeScript types for the data object.

If you use stage.obet.no as the proxy server, you will need to copy the data object from dev.obet.no to stage.obet.no. This can be done with pnpm copy-datasources. Many apps also provide a pnpm cd script that runs copy and type generation together.

Data API data resources

The alternative way to create data objects is using data resources and the Appframe CLI. If the view has not been added to data resources, first run af resources add <viewName> to do this. This has to be done for dev, stage and prod servers.

To generate a data object, use af resources generate <viewName> to define it in stdout. This command offers various options for customizing sorting, fields, and grouping. For a full list of options, run af resources help generate. For detailed examples and flags, see af resources generate.

Commonly used flags are:

  • -g - Uses the global variant of af.DataObject instead of importing from @olenbetong/appframe-data

  • -t - Generates Typescript definitions for the data object

  • -i <name> - Sets the data object name

  • -e - Exposes the data object in the global af.article.dataObjects object

  • --fields <fields> - Comma separated list of fields that should be included

  • -m <number> - Max number of records/page size

  • -p <permission> - Permissions fot the data object (I = insert, U = update and D = delete). Can be combined, for example IUD for all permissions

  • -d - Use dynamic loading (paging)

  • --where <whereClause> - Default where clause

You can streamline your workflow by piping the output of the af resources generate <viewName> command directly to your clipboard. This is especially useful for quickly transferring the generated data object definitions into your codebase or documentation. On Unix-like systems, you can achieve this by appending | pbcopy to the command, while on Windows/WSL, you can use | clip.exe. For example, af resources generate MyView -gti dsMyView -m 100 | clip.exe will generate a data object with TypeScript definitions, a page size of 100, and copy the result straight to your clipboard.

Parameters

Data objects keep track of various parameters used when fetching data. These parameters can be modified using the setParameter method of the data objects. Commonly used parameters are:

  • whereClause - Where clause to use when fetching data. Typically controlled completely by the application, and not modified by the user

  • filterString - Filter string to use when fetching data. whereClause and filterString will med merged using (whereClause) AND (filterString). Typically used for user controlled filtering

  • maxRecords - Number of records fetched, or page size for dynamic data objects

Loading data

When the parameters are ready, use refreshDataSource to load data into the data object.

Note that by default, refreshDataSource will not throw an exception if it fails.

If a data load is pending, calling refreshDataSource again will only have an effect if the parameters have changed. If they have, the previous request will be aborted; otherwise, the same promise from the first call will be returned.

Current row

Data objects keep track of a selected row. The current row can be retrieved or modified using the currentRow method.

  • dsMyDataObject.currentRow() – Returns the current row

  • dsMyDataObject.currentRow("MyColumn") – Returns the value of the column "MyColumn"

  • dsMyDataObject.currentRow("MyColumn", "new value") – Sets the value of the column "MyColumn" to "new value"

The current row can be changed using setCurrentIndex. To add a new row to the data object, set the current index to -1.

To save changes made to the current row, use the endEdit method.

PreviousCreating a new applicationNextUploading files

Last updated

Was this helpful?