From a list view, directly to a list view

[Frank]

In many cases, clicking a menu item will show a list (table_A) and clicking on a record will show a detail of that record.
Instead of a detail, I want the user to see a list of related records from table_B, and I want them to see this table_B list instead of the table_A list, not next to it.

The use case would be, a shopping app on a phone in portrait orientation ( so no place next to a list ) where a user first sees which shopping lists they have, and when they click on one, they will see its contents which is a list of items in the list.

[Jo-Anne]

ShoppingListApp-20240402.fdf (2.9 MB)

Hi Frank,

I have attached an FDF (Five Definition File) that you can import. Note, if you are on the Trial version, you would need to backup your current application and then delete it so you can import the FDF I have attached because in the Trial version you can only have one application at a time. Alternatively, you could also download the Desktop version and import this FDF into here to have a look. The Desktop version allows an unlimited amount of FDFs to be imported.

Download | Five

Follow the steps below to see what I have done.

1. Select the application record in the list and click the Manage button.

2. Select Visual in the menu and Forms in the sub-menu.

3. Select the TableBs record and navigate to the field records by clicking the Pages tab, selecting the General record and clicking the Fields tab. You can see in the image below, that I have three fields and one has a foreign relationship with the TableA table.

4. Now select the TableAs record in the list. On the General page here you will see the Page Navigation is set to Continuous. This will remove tabs across the top of your form and display the form in a continuous manner so that you can have your shopping list and the details for the shopping list on the same page.

5. Navigate to the Page records by clicking the Pages tab. You will see here I have two page records. The first record is to display the fields from my current form (TableAs). The second record is to display the fields from TableBs form.

6. Select the TableBs record and you will see it has a List page type and refereces the action TableBs (form).

7. To remove the menu from the left hand side in your application, navigate to Instances by selecting Setup in the menu and Instances in the sub-menu.

8. On the default record click the lookup icon in the User Interface field and select New York. Please note if you are working with the Trial version and have this application deployed, you won’t be able to edit this record. You will need to remove it from deployment to be able to edit the record and then redeploy the application.

9. Now when you run/deploy your application, you can select a record (TableAs) and you will see the name of your shopping list and below the shopping list name you will see the details for the list. (TableBs). You can click the Add button here to add more items to the list.

You will notice when adding a new item to the list that Five has automatically knocked out the foreign key field (TableA), this is because Five knows what shopping list you are on as it is stacked above.

I hope this helps your use case Frank, please post again if you need further assistance.

[Frank]

Hi @Jo-Anne

Thank you for the demo file and your additional explanation. I’ve learned something more about five.
Is it also possible to show the list of items instead of the list of shops?
And can we also get the list of TableBs without the detail form of a shopping list. I tried to simply delete the detail page from the TablesA form, but that lead to an error during run time.
cheers
Frank

[Pranoy]

Hi @Frank

If you want to get the list of TableBs without the form for a shopping list you can follow these steps:

1. Select Visual in the menu and Forms in the sub-menu

2. Select the TableAs record, now since you dont want the have the Shopping List field, on the General page change the Page Navigation back to Top
   

   

3. Now navigate to Page records by clicking the Pages tab, you will see two page records here, List Details (which contains the shopping list field) and TabelBs (which is the list view for items). Here if you want to only see the List from TableBs you can drag and drop the TableBs page on place it on the top so that it becomes the default page instead of the TablesA

Placing it on the top will make this page the defaul view and now you should be getting a layout where you will see just the list of TableBs

Regarding displaying the list of items instead of the list of shops, I suggest you build a form directly for TableBs. This form will display a list of items on the left and individual records that can be adjusted by clicking on them.

Hopefully this helps

[Frank]

Hi @Pranoy ,

Thank you. Another step closer, but still no cigar. Both you and Jo-Anne are missing the word instead and the elaboration in my original question.

Instead of a detail, I want the user to see a list of related records from table_B, and I want them to see this table_B list instead of the table_A list, not next to it.

Can that be done?

[Jo-Anne]

Hi Frank,

You could try a parent menu. What happens here is your tableA records are shown and a Down button appears on a record. The Down button when pressed drills down to show TableB records that ‘relate’ to TableA.

I’ll demonstrate with the Shopping List app I previously sent you, and I have added the link below as well.

Create A Parent-Menu | Five | Low-Code For Real Developers

In Five, you have your two tables, TableAs and Items (TableB). Each of these records only has one page holding the fields for the form.

Now navigate to the Menus, by selecting Visual and then Menus.

Make sure both forms have a menu item. The Shopping List menu item just references the TableAs form.

The Items menu item references the Items form (which would be your TableB form). And in the Parent Menu field you would select the Shopping Lists menu item to be the parent.

In your application you would select a TableA (Shopping List) record and you can now drill down and only see the items (TableB) belonging to this shopping list.

I hope this helps your requirement.

[Frank]

Hi Joanne,

thank you for your suggestion. I got it to work and it gets the items list indeed instead of the list of shopping lists. Is there no way to get that down button ( or another button with the same functionality ) to appear directly in the list of shopping lists?

I am insisting because I imagine this app to be used on phones, that people hold in their hand at home or in the shop. They will hold it in portrait orientation.
I tried simulating this in the runtime and it appears that clicking on the list replaces the shopping lists list with the detail view. Then clicking on the down arrow results in the detail view being replaced by the items in that shopping list. I guess that in some use cases this is acceptable, but in others it is not.
For example, the next step would be that in the list of items, the user can click an item to make it ‘marked’ or unmarked ( as in, I need to buy this item, or I just bought it ). It would also need a button to edit the item details. The latter would require a detail view, but having the former only possible by going through a detail view would not be a good user experience.

[Jo-Anne]

Hi Frank,

I have an idea that I think will work. Could you please give me a bit of time to get a sample of it together for you to pass onto you?

[Jo-Anne]

ShoppingList.fdf (2.9 MB)

Hi Frank,

You could use Five’s inbuilt function selectAction() to achieve this. I have attached another ShoppingList FDF for you to have a look at.

The FDF attached contains two forms, Shopping Lists and Items and are still linked up in the traditional way via the Shopping List menu item. This is the original method I showed you that had the Down button.

There is now a second menu item called Shopping List mobile and this menu item references the Shopping Lists data view. Click the VIEW button next to the Action field and this will take you to the Shopping List data view record.

If you have not used data views before, they are a way you can display the data you want in your application. Please note that in a data view, you cannot add shopping lists, this will need to be done via the original menu.

When you add a data view, you must select a data source and the data source will supply the fields to your data view. The Shopping Lists data view is using the ShoppingList table as its data source as shown in the image below.

If you click the Data Fields tab, you will see the fields from the table, shown below. The Shopping List data view displays the Name of each shopping list in the list.

The Name column has a display type of _Text and has a function attached to the On Click event. So effectively the Name field becomes a button in the list.

The SelectShoppingList function attached to the Name field, when clicked it will push the ShoppingListKey into the stack so when selectAction() is called selecting the Items form action ID, the items will be displayed filtered by the shopping list.

The Items in the Shopping List app will be displayed when the shopping list name is clicked in the list as the ShoppingListKey has been pushed into the stack. The Items form behaves like it would normally act in the original setup using just forms and the drill down. Please note that I added a boolean field to click whether to buy the item or not.

A new item can be added here or you can select a record in the list.

A Back button was added that will return you to the Shopping List.

You can see this on the Items form on the Action Button record.

It is using the other function called backToShoppingList() attached to the On press event for the Back action button on the Items form.

Here is a link to understand Five’s stack:

stack | Five | Low-Code For Real Developers

You can edit the size of the button by using the Display field on the data field record on the Data View form. In mobile mode the buttons look better and should not need editing as they are just the width of the phone.

I hope this helps you to achieve what you are after Frank!

[Frank]

Hi Jo-Anne,

Thank you so very much for finding a way and explaining how it is done. I guess I will have to learn about JavaScript, but I don’t mind that at all.

If you don’t mind, I have two follow up questions:

1. I noticed that the General page of the ShoppingLists form has a Name field which has an On Click Event. Why didn’t you use that? Because the we cannot override the default effect of clicking on an item in the list (which is jumping to the detail form)?

2. The ShoppingListDV has the ShoppingListKey field listed under Data Fields and ‘Show if’ is set to false. Did you include it because otherwise the SelectShoppingList function would not be able to access it? ( Even though the field is part of the ShoppingList table which is the data source for the Data View )

cheers

Frank

[Jo-Anne]

Hi Frank,

1. You could use the On Click event on the Name field, however, you may want to create an extra field with a _Button display type and put that next to your text field. On Click on a text field puts the form into edit mode, the On Click would then take you away from the page when a user may think they are about to type in the Name field. The button is obvious they are about to leave the page, whereas, having an On Click event on a text field isn’t and may confuse your users.

2. Yes, you are correct! It is included so we can access it.

[Frank]

Thank you for elaborating, @Jo-Anne