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

Create a VarParagraphOfficeInvoiceChatPattern variable to serve as the success message for an order invoice.

ensure var VarParagraphOfficeInvoiceChatPattern kind: paragraph 
  deploy: fixedOnDeploy 
  value: "Hello ${p1}, Total order invoice: ₹${p2}, Dated ${p3}."

Set the VarParagraphOfficeInvoiceChatPattern variable as chat pattern variable to the OutputInvoice form

// switch context to OutputInvoice
ensure form OutputInvoice
  chatPatternVar: {
      'var': 'VarParagraphOfficeInvoiceChatPattern',
      'paramSet': [
        '${f:Details.OfficeName}',
        '${f:Summary.TotalBill}',
        '${f:Details.InvoiceDate}'
      ]
    }

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

//************
// 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, Signature]
  columnSizeSet: ["Flex"]

Apply header layouts to the OutputInvoice form

//*******
// 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]

Apply footer layouts to the OutputInvoice form

//*******
// 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]

Apply main layout to the OutputInvoice form

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

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

Apply template layout to the OutputInvoice form

//*********
// 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

Apply a Table layout to the InvoiceHistory spreadsheet.

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

Implement a ShowInvoiceHistory action to view and update the exsting invoice data within the OrderBook spreadsheet.

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

3. Group actions

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

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

Backend Automation

Frontend

1. DeeplinkGetInvoice

a. OutputInvoice layout

b. Bind deeplink

2. Actions

a. SendInvoiceReport

b. ShowInvoiceHistory

3. Group actions

Showcase

Platform

Community

About us