Views

There are two ways to have the admin panel display a view:

• Have a menu item in your section-structure, referring to this view
• Open a view by using window.rebaseUi.loadViewModule(name, title, props) Where name is the name you registered your view with, title being the text that will be displayed on the tab or title-bar and props being an optional object.

To register a view, add it to the views section of the scheme object:

{
  ...,
  "views": {
    "MyView": {
      "viewTitle": "Onboard new Customer",
      "viewPrivileges": ["sales-team", "human-resources"],
      "viewJsxFile": "src/adminpanel/views/my-view.js",
    "MyOtherView": {
      "viewTitle": "Customer Index",
      "viewPrivileges": ["sales-team", "human-resources"],
      "viewJsxFile": "src/adminpanel/views/my-other-view.js"
    }
  }
}

To access the view from the sections menu structure, add it like this:

{
  ...,
  "sections": {
    "mySectionNr1": {
      "sectionTitle": "Customers Management",
      "sectionIconAsset": "icon-customers",
      "sectionPrivileges": ["sales-team", "human-resources"],
      "sectionMenus": {
        "management": {
          "sectionMenuTitle": "Customers",
          "sectionMenuActions": [{
            "sectionMenuActionTitle: "Create new customer",
            "sectionMenuActionIcon": "icon-add",
            "sectionMenuActionView": "MyView"
          }, {
            "sectionMenuActionTitle": "Customers index",
            "sectionMenuActionIcon": "icon-list",
            "sectionMenuActionView": "MyOtherView"
          }]
        }
      }
    }
  }
}

Example implementation of my-view.js:

import { html, Component } from './rebase-ui-runtime'
import Text from './components/Text'

export default class MyView extends Component {
  render = () => {
    return html`<${Text} text="Hello world!" />`
  }
}

When using custom or builtin-components, import them from the ./components/ sub directory.

When using assets like images, refer to them with ./assets/my-asset-name.

Usually your views will either contain a form for an entity, like a user-account settings form or list entities in a table. You can utilize the builtin component, like the TableView, to account for most of these common use cases.