Quickstart building a web application (Web/Mobile)
Lesson 9: Filter the Media list
In the previous lessons we have created Select Views for Person and Media. In this lesson we will make it possible to filter the Media list based on Persons.
- Open the SelectPerson list from the Workspace Explorer.
- Remember that in the wizard we selected both as the navigation options for this select view. Open the To-Do items in the Studio. <
- The wizard entered two to-do items in this view.
- Double click the first to-do. It immediately jumps to the right place in the source code.
- Remove the to-do item and the Error from the source code.
- Note that we are inside a case statement and we’re inside the case where the navigation type is ‘nfFromParent’, meaning that we came into this view from the parent. Most likely that is not going to happen, but by default we’re going to implement this as well.
- Enter: Register_Object oSelectMedia. We have to register this object, because otherwise we would create a circular include statement.
- On the next line enter: Send NavigateForward of oSelectMedia Self. This basically tells the Framework to navigate into this view. Self is a reference for the current view, so it knows which view we are coming from and what record it should select.
- Copy the code, line 88 and 89.
- Remove the ToDo item from line 102 – 106.
- Paste the code.
- So in the Else case, which is where we will end up in in our sample, we’re going to do the same thing. So if we’re not coming from a different select view we’re going to navigate into the Select Media View.
- Compile and Run the application. First click the compile button and then the Run button.
- Go to Menu, View, Persons.
- When clicking on John Tuohy, for example, the Media he owns shows.
- Clicking on Stephen Meeley, it shows he has no data.
- Click on create a new item, and enter the following data:
- Title: Mona Lisa
- Author: Leonardo Da Vinci
- Type: Image file
- Date purchased: 07-09-2017
- Price: €1000,00
- Save the record, now the Mona Lisa shows with Stephen Meeley.
- The next step is to adjust the Media Select View to which person we came from.
- Go back to the Studio.
- Double Click SelectMedia in the Workspace Explorer.
- Open the Designer by pressing F7
- Drag the cWebLabel from the Class Palette into the Designer.
- Expand it to full with.
- Change the Object name in the Properties panel to oFilterLabel.
- Change the psCaption to Media items of ‘…’ We will make those dots dynamic later on.
- Set a psCSSClass to LabelCaption. This changes the way how this label is shown.
- We need to make sure that this label is only shown when we come from a Select View. So if we go directly into Select Media and it shows all the items we don’t want to show this label.
- Go to the event onNavigateForward (line 160), which is called as soon as this View is opened. By default say: Webset pbRender of oFilterLabel to False.
- oNavigateForward gets information from being past in to it in a struct called NavigateData. In navigate data there is an eNavigateType, which tells us how we got into this view. In this case we’re going to show this label if we came from a different Select View. So from nfFromParent we will enable this label.
- Enter: WebSet pbRender of oFilterLabel to True
- Also enter: WebSet psCaption of oFilterLabel to (SFormat(“Media items of %1’”, Trim(Person.FirstName * Person.LastName))) the percentage will be replaced by SFormat.
- Compile the application.
- Run the application.
- Go to Menu, View, Media.
- Now we see all the media items and we do not see the Label.
- Go to the Menu, View, Persons.
- Select Stephen Meeley.
- Now it shows the Media items of Stephen Meeley.
- This shows that the two Select Views are connected. This finishes this lesson.
REFERENCE LIBRARY
Quickstart building a web application (Mobile touch)
