Guidelines
    Overview
  • Welcome to RamBase Guidelines
  • Applications and components
  • RamBase client overview
    Design guidelines
  • Colors & borders
  • Layout
    • Standard layouts
  • RamBase Application overview
    • Context menu
    • Expanders
    • Splitter
    • Tab controller
    Development guidelines
  • Setup environment
  • Creating applications
    • Creating your first application
    • AppEditor
    • Context menu
  • Creating components
    • Creating your first component
    • Component layout
    • Component data service
    • Keyboard handling
  • APIs
    UI Elements
  • Alertbox
  • Button
  • Checkbox
  • Complex dropdown
  • Date
  • Datetime
  • Dropdown
  • Email
  • Grid
  • Icons
  • Navigate
  • Number
  • Password
  • Popover
  • Popup
  • Progressbar
  • Radiobutton
  • Textarea
  • Textfield
  • Toastr
  • Treeview

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 headers, splitters, tab items, overlay and more. Define the placement and size of the components.

  • Application settings
  • Component settings
  • FileTree
  • JSON editor

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 mananger information and task information for the current document.

Configuration

Application introduction/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. Eeach step represents a bubble with properties like target element, intro text and position:

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 interessed 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 menuitems 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.

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


  • Select component: Lets you select/change the component.
  • Header: Specfiy 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 seperate 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 seperate section about using HTML-elements and translations inside the header.
  • Parameters: Specfiy name of the component. See seperate section below.
  • Style: Under the style section you can set the column width. Appeditor 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 betweeen 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.

Parameters

When you add a component to the appeditor, 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:

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:

Example of using ng-show in the headers:

The File tree in appeditor 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.



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.