Logo v4.0
Image Description

No Results

  • Get Support
  • GitHub GitHub
Logo v0.2
  • Docs
  • Snippets
  • Getting started
  • Introduction
  • Development
  • Actions
  • Model Actions
  • Report Action
  • Views
  • Form
  • Table
  • Data
  • API

Welcome to Katrid.js documentation!

Katrid.js is a javascript admin framework powered by webcomponents, vue and bootstrap.

The main function of this project is to simplify the admin interface development process and add allow integration with any modern language with HTTP support on server-side.

The component set is built using vuejs 3 to handle with data binding and bootstrap on the UI design.

Firsts steps

Create a Katrid WebApplication instance: `` ` html

`` `

The WebApplication instance will mount a very basic admin interface template on #webApp element.

Admin Page

The main goal of an Admin Interface is display and organize the result of user actions. In the case of Katrid.js Admin Page, the user interacts with UI elements and generally those UI elements execute the Katrid.Admin.Action.execute method, and as the result the Katrid.js will render a HTML content inside the view area.

The admin page is initially divided in 3 main parts: * App Header - The application header with basic menu, search bar and another common UI elements * Side Menu - Left/right tree menu * Action Manager - The presentation area where the Katrid.js will display the content of UI Actions

_screenshot goes here

_As you will see soon, you can customize the content of the Admin Page with your own elements._

Admin Actions

Actions are the way the user interacts with Katrid.js under the admin interface. We have the following basic action types: * Client (ui.action.client) - Executes a non-visual tag or render a visual tag * Window (ui.action.window) - Render a Window Action in the Action Manager element for a specified Model * View (ui.action.view) - Render a View Action in the Action Manager element * Report (ui.action.report) - Render a Report Action and wait for user interaction

Client Action (ui.action.client)

The client action is useful to display or execute operations in the browser. Client must specify at least the tag name that will be consequently interpreted by the ActionManager.

Example: `javascript Katrid.Actions.ClientAction.dispatch('refresh'); // refresh the data in the active/visible action `

Window Action (ui.action.window)

Window Action Katrid.Admin.WindowAction (or ui.action.window shortcut) should be used when needed to display a Data Window View component, for example CRUD and search operations for a model.

Example: `javascript let action = new Katrid.Admin.WindowAction(MyModel); // or let action = new Katrid.Admin.WindowAction({model: MyModel}); app.currentAction = action; // set the webApp current action and render the content into Action Manager element. `

View Action (ui.action.view)

Should be used to display a html template content on the Action Manager element.

Example: `javascript let action = new Katrid.Admin.ViewAction(`

My view content
`); app.currentAction = action; `

Report Action (ui.action.report)

Is useful when the user needs to fill input parameters and click a button to start a process.

Example: `javascript let action = new Katrid.Action.ReportAction({params: [], callback: fn}); app.currentAction = action; `

Model Window Views

The WindowAction will render and manage a set of Katrid.Admin.DataView components in the action manager area.

Basic view types: * List - Display a list of objects * Form - Show the record fields in a form layout * Card - Organize a list of objects using cards boxes layout, each object will be display within its own rectangle * Calendar - Organize a list of objects using a calendar view * _Search - This a special view type and will be visible in any SearchableView instance. Its content can be customized using json, xml/html or javascript

_As we will see further, we can implement new types of views using pure typescript/javascript or vue

The WindowAction can handle with one or more views: `javascript let action = new Katrid.Admin.WindowAction({model: MyModel, viewTypes: ['card', 'list', 'form']}); `

### List View

This component is used to display a list of objects in a table element.

### Form View

This component is used to show and edit fields of a model referenced by a record. `javascript let view = new Katrid.Admin.ViewInfo({content: `

`}) let action = new Katrid.Admin.WindowAction({model: MyModel, views: {form: view}, viewTypes: ['card', 'list', 'form']}); `

Field components use the vuejs to binding data.

Menu Items

Menu items are fundamental to allow the user actions accesses.

_screenshot goes here

Example of menu creation: `` ` javascript let menu = new Katrid.Admin.Menu([

{id: 'products', name: 'Products', icon: 'product.png', children: [{id: 'view-products', name: 'View Products'}]}, {id: 'settings', name: 'Settings', icon: 'settings.png'},

]);

let newMenuItem = menu.add('New menu'); let anotherMenuItem = menu.add({name: 'Another Menu'}); let subMenuItem = anotherMenuItem.add('Sub menu', actionInstance); app.menu = menu; `` `

Portlets

Portlets are shortcuts and generally points or embed to available actions in the WebApplication.

System Portlet Types: * GotoWindow * QuickCreate * GotoReport * GotoAction * GotoModel * DataView * ReportView * Calendar