Frontend

1. ShowDashboard

a. OutputDashboard layouts

Apply a Calendar layout to the TeaVsCoffee grid to display the data in a calendar format.

// layouts of OutputDashboard form

ensure form OutputDashboard
ensure grid: TeaVsCoffee

ensure layoutGrid Calendar kind: calendar
  fromDateField: TeaVsCoffee.Date
  titleField: TeaVsCoffee.Month
  showFields: [Date, TotalSales, MonthInNumber, TotalTea, TotalCoffee, Month]

Apply a LineChart layout to the TeaVsCoffee grid to display the data in a line chart format.

ensure layoutGrid LineChart kind: xyChartBarGraph
  xAxis: TeaVsCoffee.Month
ensure xAxis AxisX
ensure yAxis AxisY
  color.value: red
  color.shade: s500
  field: TeaVsCoffee.TotalSales

Apply a BarGraph layout to the TeaVsCoffee grid to display the data in a bar chart format.

ensure layoutGrid BarGraph kind: xyChartBarGraph
  xAxis: TeaVsCoffee.Month
ensure xAxis AxisX
ensure yAxis AxisY1
  field: TeaVsCoffee.TotalTea
ensure yAxis AxisY2
  field: TeaVsCoffee.TotalCoffee
ensure yAxis AxisY3
  field: TeaVsCoffee.TotalSales

Apply an XYChart layout to the TeaVsCoffee grid to display the data in a bar chart format.

ensure layoutGrid XYChart kind: xyChartBarGraph
  xAxis: TeaVsCoffee.Month
ensure yAxis AxisY
  field: TeaVsCoffee.TotalSales

Apply a Table layout to the PendingPayments grid to display the data in a tabular format.

ensure grid: PendingPayments
ensure layoutGrid Table kind: table 
  columnSizeSet: ["Flex"] 
  renderingMode: flex
  showComps: [InvoiceId, InvoiceDate, OfficeName, OfficeNo, PendingPayments.Amount]

Apply a Table layout to the TopCustomerSet grid to display the data in a tabular format.

ensure grid: TopCustomerSet
ensure layoutGrid TableLayout kind: table 
  columnSizeSet: ["AutoSize"]
  showComps: [Name, TopCustomerSet.Amount]

Apply a Header layout to the OutputDashboard form.

ensure form OutputDashboard
ensure layout Header kind: content
  direction: horizontal
  contentPadding: thick
  showPaddingSet: ["top"]
  end.fields: [ShowAggregatedReport]

Apply a TeaVsCoffeeChart layout to the OutputDashboard form.

ensure layout TeaVsCoffeeChart kind: content
  displayLabel: "Tea vs Coffee"
  direction: vertical
  showBorderSet: ["bottom"]
  contentPadding: thin
  showPaddingSet: ["top", "bottom"]
  flexCenter.gridLayouts: [TeaVsCoffee.BarGraph]

Apply a PendingPayments layout to the OutputDashboard form.

ensure layout PendingPayments kind: content
  displayLabel: "Pending Payments"
  direction: vertical
  showBorderSet: ["bottom"]
  contentPadding: thick
  showPaddingSet: ["top", "bottom"]
  flexCenter.gridLayouts: [PendingPayments.Table]

Apply a TopCustomers layout to the OutputDashboard form.

ensure layout TopCustomers kind: content
  flexCenter.gridLayouts: [TopCustomerSet.TableLayout]
  displayLabel: "Top 5 Customers"
  direction: vertical
  contentPadding: thin
  showPaddingSet: ["top", "bottom"]

Apply a Dashboard layout to the OutputDashboard form.

ensure layout Dashboard kind: content
  direction: vertical
  start.formLayouts: [Header]
  flexCenter.formLayouts: [TeaVsCoffeeChart, PendingPayments, TopCustomers]

ensure layout DashboardTemplate kind: template
  paperSize: a4Size

b. Action

Implement a ShowDashboard action to display the aggregated data for all customers in a dashboard format.

// this action runs the Dashboard report

ensure action ShowDashboard kind: report
  icon: "AnalyticsRounded"
  report: Dashboard
  outputFormContentLayout: Dashboard

2. ShowAggregatedReport

a. OutputAggregated layouts

Apply a Table layout to the SalesByCustomer grid to display the data in a tabular format.

// layouts for OutputAggregated form

ensure form OutputAggregated
ensure grid: SalesByCustomer
ensure layoutGrid Table kind: table
  columnSizeSet: ["Flex", "AutoSize"]
  showComps: [Office, SalesByCustomer.TotalCoffee, SalesByCustomer.TotalTea, 
    SalesByCustomer.TotalAmount]

Apply a ReportSection1 layout to the OutputAggregated form.

ensure form OutputAggregated
ensure layout ReportSection1 kind: content
  direction: vertical
  contentPadding: thick
  start.fields: [Summary.Date, Summary.FromDate, Summary.ToDate]

Apply a ReportSection2 layout to the OutputAggregated form.

ensure layout ReportSection2 kind: content
  direction: vertical
  contentPadding: thick
  start.fields: [Summary.TotalTea, Summary.TotalCoffee, Summary.TotalSales]

Apply a ReportSection layout to the OutputAggregated form that integrates ReportSection1 and ReportSection2.

ensure layout ReportSection kind: content
  direction: horizontal
  contentPadding: thick
  start.formLayouts: [ReportSection1]
  end.formLayouts: [ReportSection2]

Apply a Report layout to the OutputAggregated form.

ensure layout Report kind: content
  direction: vertical
  start.padding: thick
  start.showBorderSet: ["bottom"]
  start.formLayouts: [ReportSection]
  flexCenter.gridLayouts: [SalesByCustomer.Table]

Apply a Template layout to the OutputAggregated form.

ensure layout Template kind: template 
  paperSize: a4Size
  showEnterprise: true

b. Action

Implement a ShowAggregatedReport action to display the aggregated data.

// this action runs the AggregatedReport

ensure action ShowAggregatedReport kind: report
  icon: "AnalyticsRounded"
  report: AggregatedReport
  outputFormContentLayout: Report
  outputFormTemplateLayout: Template
  sendMessageToInbox: false

c. Button action

Assign the ShowAggregatedReport action to the ShowAggregatedReport field in the OutputDashboard form.

ensure form OutputDashboard
ensure section: Details
ensure field ShowAggregatedReport
  action: ShowAggregatedReport

3. DeeplinkDashboard

Associate a DeeplinkDashboard to the Dashboard report.

// deeplink for external user for dashboard

ensure deeplink DeeplinkDashboard kind: report 
  visibilityConstraint: allowPublicSharing 
  creationRoles: [Owner] 
  expiry: withinOneWeek 
  showHeader: true 
  showEnterprise: true 
  report: Dashboard 
  outputFormContentLayout: Dashboard 
  outputFormTemplateLayout: DashboardTemplate

4. Group actions

Group all these actions into a Dashboard section for more convenient access.

// this group has all the actions those can be performed for dashboard

ensure group Dashboard
  allowPromptAssistant: false
  hideActionMenu: true
  pinnedActions: [ShowDashboard, ShowAggregatedReport]
  defaultAction: ShowDashboard
  actionPermission: {
      'ShowDashboard': {
        'menuGroup': 'Report',
        'roles': [
          'Owner'
        ]
      },
      'ShowAggregatedReport': {
        'roles': [
          'Owner'
        ]
      }
    }

Backend Deploy

Frontend

1. ShowDashboard

a. OutputDashboard layouts

b. Action

2. ShowAggregatedReport

a. OutputAggregated layouts

b. Action

c. Button action

3. DeeplinkDashboard

4. Group actions

Showcase

Platform

Community

About us