Skip to main content

Offsite Expense Approval Screen

Creating the Offsite Expense Approval Screen Below are the steps to create a "Approval Offsite Expense Page" in UI Fabric, enabling users to submit reimbursement Approvals specifically for offsite expenses.

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.,Offsite Expense Approval 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 offsite expense details. This page is similar to the "Daily Expense" page, along with couple of additional informations.

offReq1

Add Input Fields

Drag the following input nodes from the Node Gallery onto the design canvas and position them as shown in the screenshot:

  • Text:
    Use Text nodes to create the labels for each input field. Set the "Label" property of each Text node to:

    • Expense Name
    • From Date
    • To Date
    • Claim Category
    • Amount
    • Attachment
    • Claims
    • Comments
    • Manager Comments

  • TextInput:
    Use TextInput nodes for the following fields:

    • Expense Name
    • Claim Category (drop down)
    • Amount
    • Claims
    • Comments
    • Manager Comments

  • Date Picker:
    Use Date Picker nodes for both From Date and To Date. This is a key difference from the "Daily Expense" page, indicating the duration for offsite expenses.

  • DocumentUpload:
    Receipt image (documentUploader): Allows manager to upload documents relevant to the claim.

Positioning and Sizing

Arrange the input nodes using their positioning properties (column start, column end, row start, row end) to match the layout in the screenshot. Adjust the column end property to control the width of each input field.

Add Buttons

Drag Button nodes from the Node Gallery onto the design canvas and position them at the bottom:

  • Buttons:
    • Switch: Enabling this will allow the manager to write any comments.
    • Delete: Allows the manager to delete the claim.
    • Ok: Allows the manager to Approve the updated claim.

There is a table at the bottom of the page that helps to add the details of the category which will summarize and gives the total value to the form above in the Amount column.
Pivot option can be enabled in the table node that allows us to enter the data in the table to do calculations, in another term enabling pivot option makes the table editable. While enabling pivot in the node, ‘+’ and ‘saveall’ button will be appear in the application at User interface which does the function accordingly.

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)

  • The "get_claims" is a dataset used as the data source for the "Offsite Expense" form. This dataset contains information about expense claims (refer below screenshot).

offReq2

  • The "get_claims_details" is a dataset used as the data source for the "Offsite Expense" form. This dataset contains information for pivot table information (refer below screenshot).

offReq3

  • The "codeDescription" is a dataset used as the data source for the "Offsite Expense" form. This dataset contains drop down values to appear in category field (refer below screenshot).

offReq4

Logic center​

We have to add Events for all the below nodes.

  • Ok Button – It allows the manager to approve the data and update the table
  • Delete Button - It allows the manager to delete the data in the input fields on the screen
  • Switch (is command enabled) – It allows the manager to enable the comment field so that the manager can give comments if required.
  • Table (Detailed table): This is a table which allows the manager to view the expenses for multiple category and values entered by the users.

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.
  • Onsaveall: Triggered when pivot table is updated.

Adding Events to Okay Button

  • In the Logic Center, select the "Okay" button.
  • click Events: Events Screen will load with two events as onClick and On Focus
    offReq5 evnts1
  • We need 3 things to be done ‘onClick’ button.
    • Emitt Event,
    • info (pop up message/acknowledgement),
    • refresh two pages (Home Screen and offsite 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, we will the node property
    • choose ‘Save Handler’ in the nexthandler field which allows the data to get saved
    • then right click on the Event emitter, click ‘setformdata’ then click choose infomsg
    • rise –allows to do the next action

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.
    evnts3
  • 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).
    • Right click edit property will open on the right side, click on ‘enable element’ select riselisten, refer the screenshot and choose the options as shown below.

Adding Events to Clear Button

  • In the Logic Center, select the "Clear" button.
  • click Events: Events Screen will load with two events as onClick and On Focus
    offReq5 evnts2
  • We need 3 things to be done ‘onClick’ button.
    • Emitt Event,
    • info (pop up message/acknowledgement),
    • refresh two pages (Home Screen and offsite 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, we will the node property
    • choose ‘Save Handler’ in the nexthandler field which allows the data to get saved
    • then right click on the Event emitter, click ‘setformdata’ then click choose infomsg
    • rise –allows to do the next action