Any tutorial/resource showing a full project build using Glide pages

[siraj-samsudeen]

I have gotten started with Glide about a month back and I loved how simple it is - I have gone through a lot of videos from Jack in Glide university and i also went through the docs quite a bit, but I am not fully comfortable with building an app for my needs (which I will explain below). Ideally, I want a video/course that takes a project and shows how it is built end-to-end. I have checked out a few videos from Glide Ambassadors, but many of them use the old Glide Apps UI and things have changed quite a bit - the only resource I could find using Glide Pages is by Robert Petitto - https://www.youtube.com/playlist?list=PLiXRc87c6KKUGVFo0exCayGShEVo5txfD

But some of his videos jump quite a bit into advanced territory - is there any tutorial that walks through setting an app from start to end, preferably on the latest Glide pages (but even something old is ok, as long as it would help me to feel more comfortable with Glide).

Here is what I am trying to build:

I am trying to build a screen that is typical in so many applications - a Header and a Detail component. For my use case, I have a Purchase Order Screen that I need to build which has a header section (PO Number, PO Date, Supplier Name, etc.) and a detail section (Product Code, Quantity, Price, Line Amount).

Here is a sample PO entry screen

So, I need to build a composite screen using the 2 tables from Google Sheet - PO header and PO detail. I brought the PO Header into a screen and then used the PO detail as an Inline collection, but when a new row is added, I need to auto-populate the PO number that is the connecting link between the 2 tables. I could not figure out how to build the link between the 2 tables.

The next screen I want to build is a GRN (Goods Receipt Note) Screen which allows the user to select a Purchase Order and then populates the Line Item details from the Purchase Order Details to GRN Details screen - here, I want the user to see the line item quantity in a table view like the above image and then enter the received quantity in another column - all the line items should be visible at the same time - when the user finishes entering the received quantity for all, then he should save and the header info should go into the GRN Header sheet in Google sheet and line item details (multiple rows) should go to the the GRN details sheet.

So, any pointers to solve my specific case, or any pointer to a resource that would help me to understand some of the advanced functionality of glide would be much appreciated.

[Darren_Murphy]

For a full build tutorial, have you seen the below?

Build a checkout System in Glide Pages (Full Build)

Glide: FULL BUILD — Check In / Check Out System in GLIDE PAGES [Glide: FULL BUILD — Check In / Check Out System in GLIDE PAGES]

For your PO Entry screen, you might end up needing what is sometimes referred to as a “Form within a Form”. I think I did a video on this a while back, I’ll see if I can find it. It requires using a Custom Form.

[siraj-samsudeen]

Darren, thank you for the link - i have watched this sometime back and I felt it was a bit too deep - I am watching it again.

I would be grateful if you can give some tips on how to structure the tables and screens for scenarios like this:

1. should i have only one table and put both header and line item details into it - then in that case, i need to have some complex logic to extract only the unique values
2. If i have a header and detail table, is it possible to create a template screen that allow me to reuse the header and details part by changing it to use different tables - PO Detail, GRN details, etc.
3. when we have a composite screen like this, should we make the user save the PO Header first so that we create the entry in the Header table and then use that to link the PO details table when the user adds the line items - what is the best way to achieve this?

[Darren_Murphy]

@siraj-samsudeen

should i have only one table and put both header and line item details into it - then in that case, i need to have some complex logic to extract only the unique values

The simplest approach would be to split it into two tables. Whilst a single table solution is possible, it requires some advanced techniques, and so if you are new to Glide then I wouldn’t recommend it. The way to do it with two tables is to ensure that your parent table has a RowID column, and then use that as a foreign key to the child table. That is, each record created in the child table will have a column that contains the parent record RowID, and you use that to create a relation between the two tables.

@siraj-samsudeen

If i have a header and detail table, is it possible to create a template screen that allow me to reuse the header and details part by changing it to use different tables - PO Detail, GRN details, etc.

You would need to build a form screen for each table. It’s easy enough to do, and only needs to be done once.

@siraj-samsudeen

when we have a composite screen like this, should we make the user save the PO Header first so that we create the entry in the Header table and then use that to link the PO details table when the user adds the line items - what is the best way to achieve this?

Either way is possible. Again, if you are new to Glide then I would recommend the former as it’s a much simpler approach. So first create and save the parent record, and then allow the user to create one or more child records.

[siraj-samsudeen]

Thank you so much for the detailed answers.

@Darren_Murphy

Either way is possible

Can you please provide some link to the other approaches as asking the user to save the PO header first and then to create the items is a bit cumbersome? I am a software dev. So, I can venture out and try things out.

[Darren_Murphy]

@siraj-samsudeen

Can you please provide some link to the other approaches

Probably easier if I describe the approach.

Firstly, you need to use a Custom Form. A good description of what that is is given below:

Multi-step form

A custom form is just a detail screen that’s designed to act like a form and uses entry components linked to user specific columns as the temporary placeholders for the data. Once you are done filling out the form, you can have a button with a custom action that will first have an Add Row action that will take those user specific column values and write them to a different table. You can then follow that action with a Set Column action that will clear the user specific columns so it’s ready fo…

I would recommend creating a single row table (Helper Table) to use to drive the form. All columns in the helper table should be user specific. The key point is that you need an action that first sets a unique value in a column in the helper table as the form is opened. This value is used as a UUID for both the parent record as well as the child records.

Your custom form serves the purpose of both creating the parent record and adding N child records in the same screen. You need to use visibility conditions to show either the parent record entry inputs, or the child record inputs. This can be conditional on the state of a relation between the UUID and the child records table. That is, if the relation is empty then show the parent record inputs. Once the parent record is created, the relation will no longer be empty and so you switch to the child record creation inputs. You can dynamically show the added child records using a collection component with the aforementioned relation as a source.

That’s essentially the guts of it. Obviously there is a bit more to it than that, and there will be specific details related to the exact user experience that you want to achieve.

[siraj-samsudeen]

This is great. Let me try this out and get back to you, thank you so much Darren