Skip to main content

Daily Expense Request Screen

This form is to collect data on Daily Expense like 'Expense Name', 'Expense Date', Category', 'Amount', Attachment', 'Claim description' with a 'Add' and 'Clear' button.

note

Always click Save after making any changes to your artifact to ensure updates are stored successfully.

Create an Artifact​

Follow the steps below to create a new artifact

  1. Navigate to the Dashboard → UI Fabric
  2. Open the Artifact section by clicking the "Artifact" tab in the navigation bar.
  3. Navigate to the application path: My Artifacts → Global-App-Group → reimbfast-app
  4. Click the (+) button at the bottom-left to create a new artifact.
  5. Enter a unique name for the artifact (e.g., Daily Expense Request Screen).
  6. Click Create Artifact to confirm.
  7. Click Save to save the artifact and close the window.

Design a visual diagram​

Designing the Layout and Adding Input Nodes The page consists of various input fields which allows users to enter daily expense details.

Add Input Fields and labels Drag and drop the following input nodes from the Node Gallery to the design canvas and position and name them as shown in the screenshot:

dailyExp-1

Input Fields

  • Expense name (Text input): Allows users to enter a brief description of the expense.
  • Date (Date Picker): Enables users to select the date on which the expense was incurred.
  • Claim Category (Dropdown): Allows users to categorize the expense (e.g., travel, meals, rent).
  • Amount (Text input): User enters the expenses incurred.
  • Attachment (documentUploader): Allows user to upload documents relevant to the claim.
  • Comments (Text Area): Allows to write the comments or notes about the expense.
  • Manager Comments (Text input): Allows the manager to provide comments in the approval process if required Add Buttons Drag and Drop Button nodes from the Node Gallery to the design canvas and position them at the bottom.
  • Switch: Enabling this will allow the user to write any comments if required in comments field.
  • Clear: Allows the user to clear the form.
  • Add: Allows the user to submit/add the updated form.

Orchestration​

Mapping the get claims and daily expenses table as below. UI components on the right side and required fields are in the left side. (Refer here)

dailyexp-orch

  • The "get_claims" is a dataset used as the data source for the "Daily Expense" form. This dataset contains information about expense claims.

Logic center​

We have to add Events for all buttons.

  • Add Button – It allows the user to Save the data and update the table
  • Cancel Button - It allows the user to clear the data in the input fields on the screen
  • Switch – It allows the user to enable the comment field so that the user can give comments if required.

The Logic Center allows to define the actions that occur when users interact with UI elements (like buttons and switches) to manipulate data within the application if required.

Accessing the Logic Center Choose the UI component on the right side which enable to logic centre, click on it to open.

Click on Events

  • onClick: Triggered when a button is clicked.
  • onChange: Triggered when the value of an input field (including a switch) changes.

Adding Events to Add Button

  • Select the Button: In the Logic Center, select the "Add" button.
  • click Events: Events Screen will load with two events as onClick and On Focus

dailExp

Enable below actions for onclick button

  • update database
  • info (pop up message/acknowledgement)
  • refresh two pages (Home Screen and Daily Expense Screen both using this field)

Drag and drop onClick button to the canvas, you will get Add button and onclick node in the canvas

  • Right click on onClick node and edit node.
  • choose ‘Save Handler’ in the nexthandler field which allows the data to get saved
  • then right click on the Save handler then click choose infomsg
  • rise – allows to do the next action
  • riselisten – allows to update some element and perform next action
  • choose refreshElement in nexthandler it will ask details to which artifact to get refresh. choose userHomeScreen then click ok.
  • add another refreshElement to the infomsg, riselisten then choose daily expense page.

Adding Events to the Switch

  • Select the Switch: In the Logic Center, select the Switch button names (is_comment_enabled).
  • Add an Event : Add an event handler.
  • Choose the Event : Select the onChange event for the Switch. This event will be triggered whenever the switch's state changes (from on to off, or off to on).

expreq-event

  • Clear button: Clear button will clear the updated field in the form

expclear

Custom Code Editor To Add Extra Field while entering the data we need a code Editor.