📁 Showcase
Frontend

Frontend

1. DeeplinkGetInvoice

Create deeplink for report GetInvoice to be shared with customers.

a. OutputInvoice layout

Before creating deeplink let us attach a layout to OutputInvoice that we can associate with deeplink.

Layout of the OutputInvoice form is designed as follows:

// Header   = HeaderLeft                HeaderRight
//            [           Items.Table             ]
// Footer   = FooterLeft                FooterRight
//
// FlexMain = Header | Items.Table | Footer
// Actual   = Template + FlexMain
// switch context to OutputInvoice
ensure form OutputInvoice

//************
// Items.Table
//************

// switch context to Items grid
ensure grid: Items

// attach table layout to the Items grid
ensure layoutGrid Table kind: table
  showComps: [Items.Date, Items.Time, TotalTea, TotalCoffee, TotalPrice]
  columnSizeSet: ["Flex"]

//*******
// Header
//*******

ensure layout HeaderLeft kind: content
  direction: vertical
  start.fields: [
    Details.OfficeName,
    Details.OfficeNo,
    Details.Mobile,
    Details.InvoiceId
  ]

ensure layout HeaderRight kind: content
  direction: vertical
  start.fields: [Details.FromDate,
    Details.ToDate,
    Details.InvoiceDate,
    Details.TeaPrice,
    Details.CoffeePrice]

ensure layout Header kind: content
  direction: horizontal
  showBorderSet: ["bottom", "top"]
  contentPadding: thick
  showPaddingSet: ["bottom", "top"]
  start.formLayouts: [HeaderLeft, HeaderRight]

//*******
// Footer
//*******

ensure layout FooterLeft kind: content
  direction: vertical
  start.fields: [Summary.TotalBill, Summary.GST, Summary.GrandTotal]

ensure layout FooterRight kind: content
  direction: vertical
  end.fields: [Summary.PaymentQR]

ensure layout Footer kind: content
  direction: horizontal
  showBorderSet: ["top"]
  contentPadding: thick
  showPaddingSet: ["top", "bottom"]
  start.formLayouts: [FooterLeft]
  end.formLayouts: [FooterRight]

//*********
// FlexMain
//*********

ensure layout FlexMain kind: content
  direction: vertical
  start.formLayouts: [Header]
  flexCenter.gridLayouts: [Items.Table]
  end.formLayouts: [Footer]

//*********
// Template
//*********

// you can share the same template across all your reports
ensure layout Template kind: template
  showEnterprise: true
  paperSize: a4Size

b. Bind deeplink

Bind everything to create a deeplink.

ensure deeplink DeeplinkGetInvoice kind: report
  visibilityConstraint: allowPublicSharing
  creationRoles: [Owner]
  expiry: noExpiry
  showEnterpriseImageInLinkPreview: true
  report: GetInvoice
  outputFormContentLayout: FlexMain
  outputFormTemplateLayout: Template

2. Actions

a. SendInvoiceReport

SendInvoiceReport does not directly send invoices via WhatsApp. Since GetInvoice logs entries in the InvoiceHistory spreadsheet, we attach automation to the insert trigger on the spreadsheet.

ensure action SendInvoiceReport kind: report
  label: "Send invoice"
  icon: "AnalyticsRounded"
  report: GetInvoice
  outputFormContentLayout: FlexMain
  outputFormTemplateLayout: Template
  sendMessageToInbox: true

b. ShowInvoiceHistory

// attach Table layout to InvoiceHistory
ensure spreadsheet InvoiceHistory form: OutputInvoice
ensure layoutSpreadsheet Table kind: table
  showComps: [
    InvoiceId,
    FromDate,
    ToDate,
    InvoiceDate,
    OfficeName,
    GrandTotal,
    PaymentStatus
  ]

// spreadsheetEditor action
ensure action ShowInvoiceHistory kind: spreadsheetEditor
  icon: "EditNoteRounded"
  spreadsheet: InvoiceHistory
  layoutSpreadsheet: Table

3. Group actions

ensure group InvoiceCenter
  hideActionMenu: true
  pinnedActions: [SendInvoiceReport, ShowInvoiceHistory]
  actionPermission: {
    'SendInvoiceReport': {
      'roles': ['Owner']
    },
    'ShowInvoiceHistory': {
      'roles': ['Owner']
    }
  }