Introduction
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 simplifying the UI design.
Firsts steps
Create a Katrid WebApplication instance:
<link href="dist/style.css" rel="stylesheet">
<div id="webApp"></div>
<script src="dist/katrid.js"></script>
<script>
let app = new Katrid.WebApplication({el: document.getElementById('webApp')});
...
</script>
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.Actions.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:
-
ModelWindow (ui.action.window) - Renders a Model Window Action in the Action Manager element for a specified Model
-
Report (ui.action.report) - Render a Report Action params dialog and wait for user interaction
-
View (ui.action.view) - Render a View Action in the Action Manager element
-
Client (ui.action.client) - Executes a tag in the active action context
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:
<script>
Katrid.Actions.ClientAction.dispatch('refresh'); // refresh the data in the active/visible action
</script>
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:
<script>
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.
</script>
View Action (ui.action.view)
Should be used to display a html template content on the Action Manager element.
Example:
<script>
let action = new Katrid.Admin.ViewAction(`<div>My view content</div>`);
app.currentAction = action;
</script>
Report Action (ui.action.report)
Is useful when the user needs to fill input parameters and click a button to start a process.
Example:
<script>
let action = new Katrid.Action.ReportAction({params: [], callback: fn});
app.currentAction = action;
</script>
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:
<script>
let action = new Katrid.Admin.WindowAction({model: MyModel, viewTypes: ['card', 'list', 'form']});
</script>
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.
<script>
let view = new Katrid.Views.ViewInfo({content: `<form><field name="name"/></form>`})
let action = new Katrid.Actions.WindowAction({model: MyModel, views: {form: view}, viewTypes: ['card', 'list', 'form']});
</script>
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:
<script>
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;
</script>
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