Model Window Action

The Katrid.Actions.ModelWindowAction class is basically a collection of tools and widgets to be used for CRUD operations bound to a Katrid.Data.Model instance. The user can navigate visually within the main action element between records and view modes using the widgets.

<script>
// bla
</script>

Model

The model can be passed to the model action by a structure such as Katrid.Data.IModelInfo or even a Katrid.Data.Model instance. The model instance basically represents a data dictionary with information about each field and its rules.

<script>
// IModelInfo compatible object
let fields = {
  name: {caption: 'Name'},
  category: {caption: 'Category'},
}

// Katrid.Data.Model instance
Katrid.TestModels.partners = new Katrid.Data.Model({
  name: 'partners', fields: [
    new Katrid.Data.IntegerField({name: 'id', required: true, primaryKey: true}),
    new Katrid.Data.StringField({name: 'name', caption: 'Name', required: true}),
    new Katrid.Data.TextField({name: 'notes'}),
    new Katrid.Data.DateField({name: 'creation'}),
  ]
});
</script>

View Modes

An ModelWindowAction object must specify a list of possible view modes, and each view mode is a Katrid.Forms.ModelView descendant and must be rendered by the referred mode in the Katrid.Forms.Views.registry .

Views information can be passed to ModelWindowAction by passing an object of type IModelViewInfo .

Default view modes: * table: Katrid.Forms.TableView * list: Katrid.Forms.ListView (under development) * form: Katrid.Forms.FormView * card: Katrid.Forms.CardView * serach: Katrid.Forms.SearchView

How to create new View Components

<script>
let views = {
    views: {
      list: {
        template: `...`,
      },
      form: {
        template: `...`,
      },
    }
}
let action = new Katrid.Actions.ModelWindowAction({views});
action.renderTo(document.getElementById('page-content'));
</script>

Templates

It’s also possible pass a list templates to be rendered by each view component.

Example:

<template>
  <form>
    <field name="name"/>
    <field name="category"/>
  </form>
</template>