Skip to main content

Building Inventory Management Portal

In this video you will understand how to create an inventory management portal to manage warehouses, inventory and add or remove products.

1. Login to your Account​

Login to your account and Create a Blank Project then name your project and choose Create Project. In the next step Add Authentication to your application. You can choose any role and click Pocedd: Add Collection. You can add plugins ow or at a later stage and start to build your app.

DrapCode Login Form

2. Create a Collection​

Create collections for your inventory with a list of records. Define the fields as to what kind of data is needed. You can simply work on the fields as all fields are mapped automatically and you can work on the fields already available.This is a persistent collection. This means it will be saved locally.

If you haven’t created your collection yet, Click Here

DrapCode Login Form

3. Build a Dashboard​

Start building the UI for your inventory. First let's begin by creating a dashboard. You can have a default dahsboard page as part of the login/signup plugin. You can delete it and go to the Pages Settings and Update who can access it and Save the changes.

DrapCode Login Form

4. Create a Snippet​

You can create page elements such as sidebar using snippets. This will make it dynamic and it will be reflected on every page. For this click Add Snippet. Name your snippet and click Create.

DrapCode Login Form

4.1 Drop a Component​

You can either go to Components and drop a Sidebar component or go to Pre-Built Layouts and choose a sidebar todrag-and-drop. You can customize it as per your preference.

Similarly you can create more snippets for other elements such as header for your dashboard and reuse the elements across all the pages of your web app.

Also, you can divide your page into sections by going to Components and choosing Two-Section Layout to add elements to your dashboard for your web app. Then in its settings you can make its 100% fluid and Save the changes.

DrapCode Login Form

5. Create an Event to Login​

Create a login event so that when the admin logs in tey land on the dashboard. For this go to Events and Add Event. Name your event and click Create. Here choose Edit.

DrapCode Login Form

5.1 Add Event Details​

In the pop-up that appears mention the user (admin) and the page they must land onto when they login and notification message (optional) and choose Update

DrapCode Login Form

5.2 Test the Event​

Create a user and try to log them in. For this go to Add User. Mention user details and click Save. Then go to Preview but before this drop a Link component and link the login page and home page and Save.

Now refresh the Preview page and the event will be executed.

DrapCode Login Form

6. Create a Page​

Go to Pages and click Add Page. Mention the page name and who can access it and click Create.

Similarly you can create more pages for your web app.

DrapCode Login Form

7. Drop a Data Table​

Go to Components and drop a Data Table to display all categories. In its settings choose Get Data from Collection and select the filter. Then Save the changes.

DrapCode Login Form

8. Duplicate Pages​

Instead of creating new pages you can duplicate the pages and content. For this go to Pages choose Advance. Here choose the page to dusplicate and content and Update.

DrapCode Login Form

9. Drop a Collection Form​

Go to Components and drop a Collection Form to create new categories. In its settings choose Get Collection. Then Save the changes.

DrapCode Login Form

10. Create an Event for Category​

Create an event to build a category. For this go to Events and Add Event. Name your event and click Create. Here choose Collection and Save Data.

DrapCode Login Form

10.1 Add Event Details​

In the pop-up that appears mention the category and notification message (optional) and choose Update

DrapCode Login Form

10.2 Page Redirect​

Now choose Navigation to Page Redirect.

DrapCode Login Form

10.3 Add Event Details​

Choose the page to redirect to and Save.

DrapCode Login Form

11. Bind the Event​

Go to the Page and open the Settings of the Collection Form. Here Link the event by choosing it from the dropdown and Save the changes.

DrapCode Login Form

12. Test the Event​

Click Preview and choose the button to test the event and Submit the details. It will create the category and redirect to the page.

DrapCode Login Form

13. Create a Page​

Just like before create the Pages for warehouse this time. In the dropdown copy from the existing pages so you do not have to redesign the new page and click Create.

DrapCode Login Form

14. Drop a Data Table​

Go to Components and drop a Data Table to display warehouse data. In its settings choose Get Data from Collection and select the filter. Then Save the changes.

DrapCode Login Form

15. Link the Page​

Create a button to display warehouse details and link it to the page by opening its Settings and choosing the page to link and Save the changes.

DrapCode Login Form

16. Create an Event for Warehouse​

Create an event for warehouse. For this go to Events and Add Event. Name your event and click Create. Here choose Collection and Save Data.

DrapCode Login Form

16.1 Add Event Details​

In the pop-up that appears mention the collection and notification message (optional) and choose Save.

DrapCode Login Form

16.2 Page Redirect​

Now choose Navigation to Page Redirect.

DrapCode Login Form

16.3 Add Event Details​

Choose the page to redirect to and Save.

DrapCode Login Form

17. Bind the Event​

Go to the Page and open the Settings. Here link the event by choosing it from the dropdown and Save the changes.

DrapCode Login Form

Go to the Page and open the Settings. Here link the page by choosing it from the dropdown and Save the changes.

DrapCode Login Form

19. Test the Event​

Click Preview and choose the button to test the event and Submit the details. It will create the new warehouse and redirect to the page.

DrapCode Login Form

20. Create a Page for Products​

Just like before create the Pages for products this time. In the dropdown copy from the existing pages so you do not have to redesign the new page and click Create.

DrapCode Login Form

21. Drop a Data Group​

Go to Components and drop a Data Group to display warehouse data. In its settings choose Get Data from Collection and select the filter. Then Save the changes. You can customize them further as you prefer.

DrapCode Login Form

22. Link the Page​

Create a card to display warehouse details and link it to the page by opening its Settings and choose Get Data from Collection (which is product here) and Save the changes. Similarly you can link more records to this Data Group.

DrapCode Login Form

23. Link Button to the Page​

Create a button and opening its Settings and choose the page to link it to (which is product here) and Save the changes.

DrapCode Login Form

24. Create an Event for Product​

Create an event for warehouse. For this go to Events and Add Event. Name your event and click Create. Here choose Collection and Save Data.

DrapCode Login Form

24.1 Add Event Details​

In the pop-up that appears mention the collection and notification message (optional) and choose Save.

DrapCode Login Form

24.2 Page Redirect​

Now choose Navigation to Page Redirect.

DrapCode Login Form

24.3 Add Event Details​

Choose the page to redirect to and Save.

DrapCode Login Form

25. Bind the Event​

Go to the Page and open the Settings. Here link the event by choosing it from the dropdown and Save the changes.

DrapCode Login Form

26. Test the Event​

Click Preview and choose the button to test the event and Submit the details. It will create the new warehouse and redirect to the page.

DrapCode Login Form

27. Create an Event for Dashboard​

To display details of say products, categories and warehouse on the dashboard page create an event. In the event choose Navigation and Page Redirect.

DrapCode Login Form

27.1 Add Event Details​

Choose the page to redirect to and Save.

DrapCode Login Form

28. Bind the Event​

Go to the Page and open the Settings. Here link the event by choosing it from the dropdown and choose the button option and Save the changes. Similarly, bind the events for warehouses and categories.

DrapCode Login Form

29. Create a Filter​

For this choose Filters on the top and add details as per your use case and click Create Filter. You can add conditions too if preferred. You can do so for warehouses and categories.

DrapCode Login Form

30. Bind the Filter​

Go to the Page and open the Settings. Here link the filter by choosing it from the dropdown and Save the changes. Choose the Get Content, Collection Name and Collection Filter. Similarly, bind the filters for warehouses and categories.

DrapCode Login Form

31. Test the Event​

Click Preview and the dahsboard page will display the details as added. You can add new records as per your use case.

DrapCode Login Form