RamBase Guidelines

Example of a typical grid component

<div rb-grid
     access-rule="100474"
     k-data-source="vm.dataSource"
     lookupcomponents='{"Assignee": {"name": "EmployeeLookup"}, 
                        "ShippingServiceId": {"name": "ShippingServiceLookup", "params": "vm.shippingServiceParams"}}'
     k-on-change="vm.onChange(kendoEvent)"
     k-on-data-bound="vm.databound(kendoEvent)"
     k-reorderable="true"
     k-resizable="true"
     default-filter="Name,PurchaseQuoteRequestId"
     rb-message-field="highlightedNotification.translatedMessage"
     data-selectrow="quoteRequestId"
     rb-addnewlabel="{{'Create new quote request' | translate}}"
     rb-addnewpopover='{"popovertemplate": "newQuotePopover", 
                        "okaction": "vm.createNew()", 
                        "cancelaction": "vm.clearFields()", 
                        "disableokaction": "vm.checkIfEmpty()"}'
     k-columns='[
	{
			"field": "status",
			"title": "St"|translate,
			"width": 33
	},
	{
			"field": "purchaseQuoteRequestId",
			"title": "Id"|translate,
			"width": 60
	},
	{
			"field": "createdAt",
			"title":"Created at"|translate,
			"hidden":true,
			"type":"datetime",
			"width": 45
	},
	{
			"field": "registrationDate",
			"title":"Registration date"|translate,
			"type":"date",
			"width": 110
	},
	{
			"field": "supplier.supplierId",
			"title": "Supplier id"|translate,
			"hidden": true,
			"width": 75,
			"lookupComponent": "SupplierLookup"
	},
	{
			"field": "validity.expirationDate",
			"title": "Expiration date"|translate,
			"width": 110,
			"hidden": true
	},
	{
			"field": "totals.totalAmount",
			"type": "decimal",
			"format": "{0:n2}",
			"width": 90,
			"attributes": {
					"style": "text-align: right"
			},
			"headerAttributes": {
                "style": "text-align: right"
            },
			"title": "Total amount"|translate
	}]'>
</div>

Attributes

Grid columns

Which columns to show is typical defined in a declarative column definition, but the columns can also be defined in javascript by using an angular binding like this: k-columns="{{vm.myColumns}}". The valid attributes is:

Example:

<div rb-grid
     k-columns='[
     {
        "field" : "status" ,
        "title" :"St"|translate,
        "width" : 35
     },
     {
        "field" : "salesOrderId" ,
        "title" :"Order id"|translate,
        "hidden" :true
     },
     {
        "template" :"<div><i rb-inspect=\"#=sarlink#\" class=\"icon-sar\" title=\"Assignments\"></i></div>",
                "title":"Assignments",
                "type":"icon"
     },
     {
        "field": "registrationDate",
        "title":"Registration date"|translate,
        "type":"date"
    },
    {
        "field": "customer.customerId",
        "title":"Customer id"|translate,
        "lookupComponent": "CustomerLookup"
    },
    {        
        "title":"Seller"|translate,
        "exportField": "seller.firstName, seller.lastName",        
        "template": "#: seller.firstName# #: seller.lastName #",
        "hidden": true
    },

    {
        "field": "totals.totalAmount",
        "title":"Total amount"|translate,
        "type": "decimal",
        "format":"{0:n2}",
        "attributes": {
            "style": "text-align: right"
        },
        "headerAttributes": {
            "style": "text-align: right"
        }
    }
    ]'>
</div>

Datasource

Examples of datasource definitions. In the simplest form all you need to specify is an url. CreateKendoDatasource immediately executes a GET request on the specifyed API resource when the component has loaded. Use k-auto-bind="false" if you want to prevent that behaviour.

<div rb-grid
     k-data-source="vm.dataSource">
</div>

vm.dataSource = ds.CreateKendoDatasource({
    url: config.dataSources.orders.url
}); 

vm.dataSource = ds.CreateKendoDatasource({
    url: "sales/orders",
    schema:{
        data: function(data){                            
            return data.salesOrders; // Here you can "manipulate" the dataset before its rendered in the browser
        },
        total: function(data){
            return data.paging.size; // Used to calculate the paging information
        },
        model: {
            id: "salesOrderId" // API field which is used as an unique id
        }
    }
}); 

Datasource methods:

Databound example:

vm.databound = function (event) {
    vm.updateAddNewButtonState();
};

vm.updateAddNewButtonState = function () {
    $timeout(() => {
        let disableAddNewButton = (vm.risk?.status ? vm.risk.status : 9) >= 3;
        $('[data-component-title="RiskAnalysis"] .rb-AddNewBtn').attr('disabled', disableAddNewButton);
    });
};

On-change event (select row)

The on-change event fires when a user clicks or press the enter key on an item in the grid.

<div rb-grid
        k-on-change="vm.onChange(kendoEvent)">
    </div>

    vm.onChange = function (evt) {
        var itemSelected = evt.sender.dataItem(evt.sender.select()); //Access the current selected item
        ds.changeUrlParameter("salesOrderId", itemSelected.id); //Use the id number to change the url parameter
    };

Lookup components

Same as the lookup-component property described under Grid columns. But here you can also specify lookup-components for filterable fields which are not returned as part of the dataset from the API. And there is support for passing parameters to the lookup-component. Homer has a template type which can generate the lookup component markup: rb app myLookupComponent -lookup

<div rb-grid
     lookupcomponents='{"CustomerId": {"name": "CustomerLookup", "params": "vm.customerParams"}}'>
</div>

Create new item using inline script template

The rb-addnewpopover will generate a "create new" button on the left side of the pager area. Clicking on the button will open a popover containing the markup from the popovertemplate. You can also specify action events like ok, cancel, create-another and disable. The markup for this actions will automatically be prepended to the popover.

The rb-addnewlabel lets you put custom label for the "create new" button. Default value is Create new item

<script type="text/ng-template" id="createOrderPopover">
    <div class="triangle"></div>
    <div class="rb-input-form itempopover row">
        <div class="flex">
            <rb-input label="{{'Customer name'|translate}}" ng-model="vm.newitem.customerName"></rb-input>
        </div>
    </div>
</script>

<div rb-grid
     rb-addnewpopover='{"popovertemplate": "createOrderPopover", "multiplemodel": "vm.createAnother","okaction": "vm.createNew()", "cancelaction" : "vm.clearFields()", "disableokaction" : "vm.checkIfEmpty()"}'
     rb-addnewlabel="Create new order">
</div>     

Create new item using component template

The rb-addnewcomponent lets you define a component to be used as a create new popover. In this example CreateNewItem is the name of the component that will be included. You can pass parameters to the component by using rb-addnewparams.

<div rb-grid
        rb-addnewcomponent="CreateNewItem"
        rb-addnewparams="vm.params"
        rb-addnewlabel="Create new order">
</div>                

vm.params = {                    
    itemCreated: function(item) { //Callback function
        //Refresh grid?
    }
};

Set permission on create new

The access-rule attribute lets you set permission on when and who can create new items. In the example 100143 is the number of the access-rule defined in the API. The access-rule can also require access-doc to be filled. In this case access-doc provides information about which order you want to create items on.

<div rb-grid
     access-rule="100143"
     access-doc="COA/{orderId}">
</div>     

Predefined filters

This attribute applies a filter box to the grid. The FilterName property will be displayed in the filter box, and the filter property will be added to the grid url. The filter can also be defined in javascript by using an angular binding like this: predefined-filter='{{vm.predefinedFilter}}'

<div rb-grid
     predefined-filter='{"filterName":"SalesOrderId {orderId}","filter":"salesOrderId eq {orderId}"}'>
</div>     

A standard RamBase grid would normally contain this set of features:

Features not supported are:

Layout

Create new items

When you develop the create new item popup, there are some things to remember:

The grid is a key element of a RamBase application.

Hiding/showing, resizing and reordering columns allows each user to customize the layout of the grid. This kind of user customization and hide/show columns gets saved in the localstorage to preserve the grid state.

Search and filter

When you use a RamBase grid together with RamBase APIs, you get a lot of functionality "for free". As this example illustrates you'll automatically get autocomplete on all possible fields to filter by. The API also provides pre-defined filters in the filter dropdown.

Navigation area

Navigation will help you to navigate to pages. Go to next, previous, first and last item.

It is possible to show either pages or records:

Other

Other functionality the grid provides by default are: