Ui5-cc-dndashboard NPM

UI5 custom library `ui5-cc-dndashboard`

DISCLAIMER: This is a community project and there is no official support for this package! Also the functionality may stop working at any time in future with newer versions of the UI5 tooling!

Sample Application

Custom Dashboard

Step-by-Step Guide

JSDoc

What is it?

This package contains a UI5 Custom Control Library which enables the creation of Drag and Drop Dashboards in UI5. This is fully configurable to include any UI5 controls or third party controls. This library primarily consists of 4 controls:

ui5-cc-dndashboard.Dashboard : The ui5-cc-dndashboard.Dashboard is a container control that holds the dashboard . The Dashboard accepts aggregation tiles of type, ui5-cc-dndashboard.DashboardTile which is the draggable component.
ui5-cc-dndashboard.DashboardTile : The draggable and resizable component which accepts aggregation content of type sap.ui.core.Control
ui5-cc-dndashboard.DashboardChart : Contains the charting library which can create different chart types (Using ToastUI)
ui5-cc-dndashboard.FunnelChart: Creates funnel chart

Install

npm i ui5-cc-dndashboard --save-dev

**ui5-tooling-modules ** is a pre-requisite which allows us to use NPM package names for AMD-like dependencies. More details here

Usage

package.json

{
  ...
  "devDependencies": {
    ...,
    "ui5-cc-dndashboard": "*",
    "ui5-tooling-modules": "*"
  },
  "ui5": {
    "dependencies": [
      "ui5-tooling-modules"
    ]
  }
}

ui5.yaml

specVersion: "2.2"
...
builder:
  customTasks:
  - name: ui5-tooling-modules-task
    afterTask: replaceVersion

server:
  customMiddleware:
    ...
    - name: ui5-tooling-modules-middleware
      afterMiddleware: compression

…view.xml

<mvc:View controllerName=...
    xmlns:dnd="ui5-cc-dndashboard">
    <Page ...>
        <dnd:Dashboard class="sapUiSmallMargin" height="80vh"
            tiles="{
                path:'/tiles',
                ...
            }"
        >
            <dnd:header>
                <Toolbar>
                    <Title text="Chart Showcase"/>
                    <ToolbarSpacer/>
                    <Button icon="sap-icon://edit" text="Edit Dashboard" press="editDashboard"/>
                    <Button icon="sap-icon://refresh" text="Randomize Color" press="randomizeColor"/>
                </Toolbar>    
            </dnd:header>
        </dnd:Dashboard>
    </Page>
</mvc:View>