InventoryTracker App

InventoryTracker is an application to keep track of office inventory. It allows user to view list of inventory items and manage them.

In this tutorial, you will learn BAPPAZ basics by creating a very simple inventory management app.

Let’s get started!

Content

• Create Test App
• Database
• Application UI
• Add Related Item
• Stand alone Inventory List
• Next Steps

Create Test App

• Click Editor tab
• Click Add to add a new test app
• Select Create Test App with a test db

This will show list of available App Template. Find Inventory Tracker App, and click Create. This will create test app and provision the database.

Database

Database has 4 tables.

• Inventory
• Catalog
• Request
• Item

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

Inventory

Tracks computing equipments in office. Has fields to identify equipment using asset tag and show if equipment is available or if it has been assigned to a user and when.

Catalog

Is used to categories and group like equipments and let employees request items from catalog. Catalog helps to keep inventory organized and lets employee request equipment based on type and not have it tied to actual equipment.

Application UI

At this point you should be in Inventory Tracker Test App Editor and should have Add Page dialog open.

If you are not on Add Page dialog, use following

• Select Editor Tab
• Select Inventory Tracker App from List of Apps
• Click Add Page (if dialog is not open)

On Add Page dialog enter following

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

This will add new Catalog page with List and Detail tabs. These represent Table and Form view, pre-made and fully functional.

Click Preview to see running Catalog page. Explore around. Click a row and see catalog details.

Click Add to add new catalog entry and enter following

Catalog name: 'MacBook Pro'
Catalog Number: 'MBP-101'
Description: 'MacBook Pro'
Status: 'Available'

Click Add on dialog

Select newly added catalog entry and update it with

Catalog Number: 'C-MBP-101'

Behind the scenes

When you selected Catalog table with Master List-Detail, BAPPAZ automatically created multi-view list screen with table view, card view, quick search, advance search and sort. An Add button was also added to create new Catalog entry.

A Form view was also created to see Catalog details. FormView is fully functional with feature to Save new record, update existing record and to delete a record.

Details to link table view with form view were also setup so that when you select a row in table, it shows details in form view and when form view is updated, corresponding row in table is also updated.

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

You might have noticed that there was no search box. Lets fix that.

Exit out of Preview by clicking Done

• Click on Quick Search and in Properties panel, select Catalog Name and Catalog Number. We will let user search with either name or number through quick search.

• Now click Advance search and select Catalog Name, Catalog Number and Status. Advance search lets power user search for specific record by combining multiple filters.

• Next click on Sort and select Catalog Name, Catalog Number and Status. With this user can sort using name,number or status.

Click Preview Type in C-M and see quick search results. Also try out advance search (try Mac and C-M) and see result. Try out sorting as well, all of it works without you having to write any SQL or do any mapping!

Exit out of Preview by clicking Done

You now have a fully functioning Catalog page with ability to search, auto paging and edit functionality.

Add Related Item

Hopefully you have an idea of what it takes to build a page in BAPPAZ. Let enhance it by linking Catalog with Inventory. This will let user see inventory of equipments we have for a given catalog entry.

Back in Editor, ensure you have Catalog page selected and are on List tab.

Click on Components Panel and find List component

Drag List component to an area just below table in List tab. When you are over drop target, it will change color, drop the list component there.

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

Inventory is now linked to Catalog. Two new tabs have been add at top of Catalog page editor, Related List and Related Details, to show Inventory list and its details.

• Click Preview
• Scroll Catalog list till you see Inventory > column with header View Inventory
• Click on Inventory >

This will bring up Inventory List showing inventory for selected catalog entry. You can see actual inventory details by clicking on particular inventory row.

Exit out of Preview by clicking Done

Behind the scenes

When you added List to an existing List, BAPPAZ understood that you are trying to link items.

Because BAPPAZ understands shape of your data, it can determine relationship between your entities, is able to show dialog with related entity, in this case Item and Inventory.

When you select Inventory, BAPPAZ added details to link each catalog entry to corresponding inventory items and also added inventory list and details view to Catalog page.

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

We now have a Catalog page with functionality to see just the related inventory. You now have good grasp of what it takes to build a page with BAPPAZ.

Let finish out the app build by quickly adding independent Inventory list.

Stand alone Inventory List

We already have a way to view catalog and related inventory. But sometimes it is useful to just see inventory and be able to quickly local a particular item. This is will be really useful for our fulfillment team when they are servicing employee requests for items

Back in InventoryTracker Editor, click Add Page

If you not in Editor with InventoryTracker selected, use following

• Select Editor Tab
• Select Inventory Tracker App from List of Apps
• Click Add Page

Enter following on Add Page dialog

Label: Inventory
Type: Card List-Detail
Table: Inventory

This will add new Inventory page. You should have Card List side-by-side with Details.

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

Click Preview, select Inventory tab and explore around. You can also configure search functionality and let user find exact items!

Hopefully you now have an idea of what it takes to build an app in BAPPAZ.

Next Steps

Continue to build your app by adding Employee Request Portal and a Kanban Board to manage tickets. ->