InventoryTracker with Request Portal

We will continue with the inventory tracker app.

We will add following functionality

• let employee request equipment
• manager can approve or reject the request
• staff can view and fulfill approved request
• Kanban Board view with integrated workflow to manage the request

Content

• Database
• Application UI
• Request with Items (Parent with Children View)
• Add Child Item
• Request Kanban Board
• Next Steps

Database

Database has 4 tables.

• Inventory
• Catalog
• Request
• Item

For this tutorial, we will be using the following tables:

Request

List of employee equipment request with field to track request status and audit for various actions

Item

List of equipments requested and has fields to track type of equipment request and which equipment was assigned by fulfillment team

Application UI

At this point you should be in Inventory Tracker app editor and have following features:

• Catalog
• Inventory

If you are not in Inventory Tracker App Editor, use following

• Select Editor Tab
• Select Inventory Tracker App from List of Apps

Request with Items (Parent with Children View)

Request functionality allows user to request computing equipments. All request must be approved and will be fulfilled by our IT team.

In InventoryTracker Editor, click Add Page

Enter following

Label: 'Request'
Type: Select > 'Multi View List - Detail'
Table: Select > 'Request'

This will add new Request page with familiar List and Detail tabs. These represent Table and Form view, pre-made and fully functional. Click Preview and see various Requests. Don't make any changes yet.

Exit out of Preview by clicking Done

Add Child Item

Back in Editor, with Request page selected, click on the Detail tab. When user makes request for equipment, they will add one or more equipments to the request. Let see how to build that screen.

On the Detail tab, scroll to bottom.

Now click on Components Panel and find the List component.

Drag List component to the very bottom of Request detail form and drop it when drop area changes color. (take care to drop it on very bottom and not into an existing Panel. If you did that, no issues, just drag it below, to new panel so that we have space to separate request details and items list)

This will bring up Add Related Item dialog. In that dialog select Item and click Add.

You should see Item list added to Request details. You will also see Related Detail tab for item details.

Behind the scenes

When you added List to an existing Form, BAPPAZ understood that you are trying create parent child view. Because BAPPAZ understands shape of your data, it can determine relationship between your entities, and is able to show dialog with related entity, in this case Item. When you selected Item, BAPPAZ added Items list to Request form and wired up list with form so that they work together as an atomic unit. When you add request, use can also add items and entire request with items is saved to database in one go as a part of transaction. If for some reason there is error while adding say an item, it won't add any records, ensure no broken data in entered in database, ensuring data integrity.

All of this without writing any sql join code or doing any data mapping, it just works!

Click on Fields panel and find inventoryIdDisplay field (Asset Tag). Drag inventoryIdDisplay field and drop it below Catalog Name in Card.

Click on Preview and select Request tab in navigation bar on left. Select a Request and see details with Items that were part of the request. Click on an item and see item details.

You now have a working Request page with child Items in form view. Request and Items are now linked and behave as a single entity.

Now lets take it up a notch and integrate with Request Flow.

Request Kanban Board

Lets see how to create a Kanban board with integrated workflow to model request process.

Back in InventoryTracker Editor, select Request page

If you not in Editor with InventoryTracker selected, use following

• Select Editor Tab
• Select Inventory Tracker App from List of Apps
• Select Request tab in navigation bar

Select List view tab and then Click on View Selector button.

In the Properties panel, you should see Table, Card and Board. Check Board under View and in Select View Selector drop down, select Board.

List screen now changes to show a board view with untitled board column and board card.

Select Board Groups and in Properties panel make following changes

Group Field: Select > 'Status'
Workflow Name: Select > 'Request Flow'

With this, you should now see board column for each stage in the Request Flow auto added and configured.

Select untitled board column. In Properties panel, hover over to top right corner (right of Group Header) and click Trash icon to Delete the untitled board column.

Select Board Card and in Properties select Fields tab. Find Requested By field (and Drag Requested By field) and drop it below Request Number in Card.

Click Preview, select Request page, click Multi View Selector (next to Add Button) and select Board.

Play with fully functional Board View. Drag a item from pending to approved and it will change status. Try to drag it back, it won't let you!

Behind the scenes

When you turned on Board View for Request List and associated with Request Flow, BAPPAZ automatically added board column for each stage in request flow and configured each column. Board view provides built-in drag-n-drop functionality and knows to call appropriate workflow actions when items are moved from one column to another. Workflow actions behind the scene update data.

All of this without writing any sql join code or doing any data mapping, it just works!

We now have a working Kanban board with drag-and-drop support integrated with request process flow.

Let ensure that same process is also enforced when user interacts with UI using Details View.

Click on Detail tab on Request page.

At bottom, you should have buttons, 'Delete' on left and 'Cancel','Update' and 'Add' on right.

Select Update button and Delete it.

Next Select that Bottom Bar (by clicking on empty area to left of Delete button)

In the Properties panel, select Request Flow for Workflow name

Workflow Name: Select > 'Request Flow'

This will add buttons corresponding to every step - action in the Request Flow, pre-wired with proper configuration and security.

Click on Approve button in Bottom Bar and examine its properties.

You will see that it has been connected to Request Flow with Pending as Workflow Step and Approve as action name. When button is clicked, Approve actions is triggered on Workflow.

Click on Display Condition. Examine conditions for Approve button will be displayed. It is tied to request status (Pending) and user having right to Approve.

Behind the scenes

When you associated Request Flow workflow with Detail View, BAPPAZ automatically added Button for each stage in the request flow and configured it to trigger appropriate action. Button also enforce security ensuring only user with proper rights can trigger workflow action.

All of this without writing any code or doing any configuration, it just works!

We now have modified form view to ensure only user with appropriate rights can act on it as per our workflow

Before processing, Select Delete button and Delete it.

Now Click Preview and check out the Request details in action.

We now have a working Request page with all the bells and whistles!

Inventory Tracker App can now manage inventory, as well as track and manage employee requests!

Next Steps

Continue by adding Dashboard, Reports and Profile pages to the Inventory Tracker App. See Inventory Tracker Tutorial 3 for more details.