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(`
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