📁 Showcase
Collection Sheet

Payment collection sheet

Backend

1. Variables

Create a VarSetOfTextPaymentType variable to represent and display the classification of a payment type.

ensure var VarSetOfTextPaymentType kind: setOfText
  deploy: fixedOnDeploy
  value: "<root>
      <node key='neft'>NEFT/RTGS</node>
      <node key='cheque'>Cheque</node>
      <node key='cash'>Cash</node>
    </root>"

2. CollectionSheet

Create a CollectionSheet spreadsheet to store data related to oreder payment.

ensure spreadsheet: CollectionSheet
  withFields: ["Date"]
  ofTypes: [date]
  removeRoleSet: [Owner]
  insertRoleSet: [Salesman]
  updateRoleSet: [Owner]
  readRoleSet: [Owner]

Rename the form from EntityCollectionSheet to EntityPayment

ensure form EntityCollectionSheet
ctx rename EntityPayment

Create a connection between CollectionSheet and VisitBook to associate each payment with its corresponding visit and configure the properties of the EntityPayment form and its associated fields.

ensure form EntityPayment label: "Payment"
ensure section: Details
ensure field VisitRef kind: ref
  spreadsheet: VisitBook
  copyFieldMap: {
      'VisitRowId': '$RowId',
      'CustomerName': 'CustomerName',
      'MobileNumber': 'MobileNumber',
      'CustomerType': 'CustomerType',
      'GSTNo': 'GSTNo'
    }
  layoutSpreadsheet: ListLayout
ensure field Amount kind: number
ensure field PaymentMode kind: pickText sourceVar: VarSetOfTextPaymentType
ensure field DepositDate kind: date
ensure field ChequeImage kind: camera
  placeHolder: "Cheque Image"
  helperText: "Cheque Image"
  showLabel: false
ensure field Attachment kind: document fileTypeSet: ["any"]
ensure field Remarks kind: paragraph

3. VisibilityRules

Apply a ChequeVisibilityRule to the EntityPayment form to toggle the visibility of cheque payment type fields, making them either visible or concealed based on the rule.

ensure form EntityPayment
ensure visibilityRule ChequeVisibilityRule
  condition: "<root>
      <stmt>Details.PaymentMode == ${d:PaymentMode.cheque}</stmt>
    </root>"
ensure actionMapIfTrue MakeChequeImageVisible
  comp: Details.ChequeImage
  visibilityAction: visible
ensure actionMapIfTrue MakeDepositDateVisible
  comp: Details.DepositDate
  visibilityAction: visible
ensure actionMapIfFalse MakeChequeImageInvisible
  comp: Details.ChequeImage
  visibilityAction: invisible
ensure actionMapIfFalse MakeDepositDateInvisible
  comp: Details.DepositDate
  visibilityAction: invisible

Apply a PaymentModeNEFT to the EntityPayment form to toggle the visibility of neft payment type fields, making them either visible or concealed based on the rule.

ensure visibilityRule PaymentModeNEFT
  condition: "<root>
      <stmt>Details.PaymentMode == ${d:PaymentMode.neft}</stmt>
    </root>"
ensure actionMapIfTrue MakeAttachmentVisible
  comp: Details.Attachment
  visibilityAction: visible
  visibilityActionOn: field
ensure actionMapIfFalse MakeAttachmentInvisible
  comp: Details.Attachment
  visibilityAction: hidden
  visibilityActionOn: field

Frontend

1. Actions

a. AddPayment

Implement an AddPayment action to insert a new payment details into the CollectionSheet spreadsheet.

ensure action AddPayment kind: rowInsert
  icon: "AddCardRounded"
  spreadsheet: CollectionSheet
  sendMessageToInbox: true

b. EditCollectionSheet

Apply a TableLayout layout to the CollectionSheet to display the data in a tabular format.

ensure spreadsheet CollectionSheet
ensure layoutSpreadsheet TableLayout kind: table
  showComps: [Date, CustomerName, MobileNumber, CustomerType, GSTNo, Amount, PaymentMode]

Implement an EditCollectionSheet action to facilitate the modification and updating of existing payment details within the CollectionSheet spreadsheet.

ensure action EditCollectionSheet kind: spreadsheetEditor
  icon: "ViewListRounded"
  spreadsheet: CollectionSheet
  layoutSpreadsheet: TableLayout

2. Group actions

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

ensure group MyVisits
  pinnedActions: [AddVisit, AddOrder, AddPayment, EditOrderBook, ReportVisit, ReportMonthlySales]
  pinnedActionSetMobile: [AddVisit, AddOrder]
  actionPermission: {
      'AddPayment': {
        'menuGroup': '1',
        'roles': [
          'Salesman'
        ]
      },
      'EditCollectionSheet': {
        'menuGroup': '2',
        'roles': [
          'Owner'
        ]
      }
    }