Skip to main content

RamBase Guidelines

RamBase App Editor

The RamBase App Editor is used to create and maintain applications. The most important part is to add components, and decide the size and where to place them. You also have headers, splitters, tab items, overlay and more. Define the placement and size of the components.


Application settings

Manage parameters

The first input field is where you specify the application url parameters. It is a list of slash separated parameters. Components using url parameters needs to be mapped to the correct application parameter.

In this example we have an application which has defined two url parameters: orderid and itemid. Later we might want to add a component to this application: ngcoalist. This component has used another name for the orderid parameter, namely: salesOrderId. When we add the component to the application we then need to map the parameter salesOrderId to orderid. This is done from the component settings panel.

The second input field is not used in all applications, but here you can specify name of the main RamBase archive the application is targeting. This is needed for displaying file manager information and task information for the current document.



Application tour: Clicking the Edit/add button will open a popup window where you can create an application tour which will be displayed to the user the first time they enter the application. The application tour will be shown as a set of speech bubbles, where each bubble can be attached to an HTML element. The tour is written in javascript using a collection of steps. Each step represents a bubble with properties like target element, intro text and position:

steps: [              
        intro: "Welcome to the sales order application!",
        position: 'right'
        element: $('[data-component-appmatch="ngCoaList"]')[0],
        intro: "Here you will find a list of all orders...",
        position: 'right'

Collapse pane: Several applications in RamBase display a list view in a left pane (column) and a detail view in a right pane. Then if the application is opened with a numeric first parameter, it often means that the user is interested in the details of that particular item. Then by initially collapsing the left pane, the whole screen width will be dedicated to the detail view.


Menu items

Here you can select a collection of menu items you want to display in your application. The menu collection and menu items can be created in the CMC application. In this example we have selected the menu collection named: salesOrderItem. Many menu items like depends on parameters, and you would then need to map the parameters between the menu collection and the application.


Component settings

The right side panel in app editor shows the different settings available for a component. You can activate the settings panel by clicking on a component cell in app editor, or by clicking the gear icon from the component toolbar.

Table 1. 
  • Select component: Lets you select/change the component.

  • Header: Specify name of the component. If the field is left blank, the component name will be used as the header title. The header title will appear at the top left side of the component. See separate section about using HTML-elements and translations inside the header.

  • Right header: Text added to the right header field, will appear at the top right side of the component. See separate section about using HTML-elements and translations inside the header.

  • Parameters: Specify name of the component. See separate section below.

  • Style: Under the style section you can set the column width. App editor is using the Bootstrap 12 column system. Meaning columns should add up to twelve for a row. You can also use the resize tool directly on the column layout if you rather prefer that.

  • Headerless/borderless: Checking headerless will remove the component title area. Checking borderless will remove the borders around the component.

  • Border: Specify each side of the border. Will not work if borderless is checked.

  • Background: Checking background will add a theme based background color to the component.

  • Height: The height property lets you choose between 100% height and fixed height.100% height means it will take up 100% height of the parent container. If you for example only has one component in an application and give it 100% height, it would fill the entire application area.If you give a component a fixed pixel height it will use this exact value when you run the application. If the component content overflows this height an expand arrow will appear in the bottom right side of the component.

  • Is navigate grid: The is navigate grid property only makes sense if the component is a list-component (grid). This will render the last column in a grid as an navigate icon.

  • App: The application to navigate to must be specified in the app field. Any application parameters can be added as slash-parameters like the example illustrates.

  • Parameters: input field is only used for navigating to "legacy" applications.

  • Named grid filter name/value: Here you can specify a named filter for the destination application.


When you add a component to the app editor, all component parameters will be listed as select boxes. The label is the parameter name defined in the component, and the dropdown items are the application parameters. You need to select (map) the component parameter to the correct application parameter. Like in this example the application will understand that it is the orderid parameter the component is addressing when the component wants to change the orderItemId value. The edit button is just a shortcut to open the application parameter definition under app-settings.

In a component there is also the possibility to specify static values. This is defined as acceptedValues in the components config file:

parameters: {
	objectType: { description: "Type of object", acceptedvalues:[ "orders", "quotes"] },			                
	objectId : { description: "Object identifier" } 

Accepted-values will also be displayed as a select box, but instead of mapping it to an application parameter you need to pick the correct static value for the application.

HTML elements and translations in component header

It is possible to add HTML-elements inside the components header (or right header). Example:

<span translate>Translate this:</span><span>&nbsp;</span>
<span translate prefer-navigate-back=#COA/{{salesOrder.salesOrderId}}>

Example of using ng-show in the headers:

<span translate ng-show=app.applicationFields.salesOrder.customer.sales.salesAssistant.firstName>
    hi there: {{salesOrder.customer.sales.salesAssistant.firstName}}


The Filetree in app editor is mainly used to add overlay text on elements like rows and panes.


In this example the overlay text is added to to the second pane in the application when the itemid parameter is missing.


JSON editor

The JSON editor lets you inspect and edit the JSON structure of the application.


You can press the F11 key when focus is inside the editor to open the editor in fullscreen mode.

The three icons in the top are for saving, preview and reset of the layout. NB: You can only reset to the previous saved layout.