1 - Select Actions

Last updated 18/07/2024

info

This section was added as an extension to the Portfolio application. You can either continue on from your Portfolio application, or you can download the PortfolioTrain.fdf to perform the extension.

This documentation is to demonstrate how you can use Five's

selectAction()

function to open another action without leaving the current menu. Because you stay on the current menu, you can then use Five's

previousAction()

function to return to the previous action.

The

selectAction()

function will be used for when we click on a slice of the Investment by Sector pie chart a data view will be displayed filtered by the sector slice that was clicked. The data view will then have an action button that will return us to the previous action through the use of the

previousAction()

function.

To do this the following steps are performed:

• Create the StocksInSector query that filters the stock belonging to each sector.
• Create the Stocks In Sector data view to display the results when a slice of the pie chart is clicked.
• Create the
  ClickSector()
  function to execute the
  selectAction()
  function on the
  Five
  object and set the
  Sector
  variable to filter the stocks belonging to the sector.
• Attach the
  ClickSector()
  function to the On Click event for the Investment by Sector chart area dataset.
• Create the
  PreviousAction()
  function to execute the
  previousAction()
  function on the
  Five
  object to return to the chart.
• Create an action button on the Stocks In Sector data view and attach the
  PreviousAction()
  function to the On Press event to return to us to the previous action when clicked.

The following short video demonstrates how the selectAction() and previousAction() functions work.

Add the StocksInSector Query

The StocksInSector query will filter the stocks belonging to the selected sector.

1. Click Data in the menu.

2. Click Queries in the submenu.

Figure 1 - Queries menu item

3. Click the Add Item button.

4. Type StocksInSector in the Data Source ID field.

5. Click in the Query field to open Five's Query Builder.

Figure 2 - Add the StocksInSector query

6. Click the SQL tab.

Figure 3 - SQL tab

7. Click the Copy button for the syntax below.

StocksInSector

SELECT
    Stock.StockCode,
    Stock.Name
FROM
    Stock
    INNER JOIN Sector ON Stock.SectorKey = Sector.SectorKey
WHERE
    Sector.Name = ?

8. Paste the syntax in the SQL Editor.

info

If you look at the

SELECT

statement you can see the

Stock.StockCode

and

Stock.Name

fields are being selected from the

Stock

table.

The

Stock

table is joined to the

Sector

table with a

WHERE

condition to filter the stocks belonging to the sector.

9. Click the Save button in the SQL Editor app bar.

Figure 4 - Save button

10. Click the Parameters tab.

Figure 5 - Parameters tab

11. Click the Add Parameters button.

Figure 6 - Add Parameters button

12. Type Sector in the Parameter ID field.

13. Type

{{five.variable.Sector}}

in the Parameter field.

info

We will need to set the

Sector

variable using the

setVariable()

function on the

Five

object. We will do this when we add the

ClickSector()

function.

Figure 7 - Add the Sector parameter

14. Click the Save button in the form app bar.

Figure 8 - Save button

15. Click the Save button in the form app bar above the list.

Figure 9 - Save button

Add the Stocks in Sector Data View

The StocksInSector query will be used as the data source for the Stocks in Sector data view.

1. Click Visual in the menu.

2. Click Data Views in the sub-menu.

Figure 10 - Data Views menu item

3. Click the Add Item button.

4. Type Stocks in Sector in the Title field.

5. Click the lookup icon in the Data Source field and select StocksInSector (Query).

Figure 11 - Add the Stocks in Sector data view

6. Click the Data Fields tab.

Figure 12 - Data Fields tab

7. Select the Stock.StockCode record.

Figure 13 - Stock.StockCode record

8. Either click the Edit button in the form app bar, or click directly in the Caption field.

9. Change the value to Stock Code in the Caption field.

10. Click the Save button in the form app bar.

Figure 14 - Save button

11. Select the Stock.Name record.

Figure 15 - Stock.Name record

12. Change the value to Name in the Caption field.

13. Click the Save button in the form app bar.

Figure 16 - Save button

14. Click the Save button in the form app bar above the list.

Figure 17 - Save button

Add the ClickSector Function

When in Five's Code Editor you will be interacting with Five's API. In the

ClickSector()

function you will be using the following functions and parameter.

setVariable()

- is a function on the

Five

object that sets a global variable. It sets the value of the named global variable with a new value on the variable property on the

Five

object.

selectAction()

- is a function on the

Five

object that selects an action to take place of the current action without leaving the current menu.

context

- is a parameter passed in from the chart area dataset containing values regarding the chart segment that is clicked which is executed through the On Click event.

1. Click Logic in the menu.

2. Click Code Editor in the sub-menu.

Figure 18 - Code Editor menu item

3. Click the Add New Code button.

Figure 19 - Add New Code button

4. Type ClickSector in the Function ID field.

5. Click the lookup icon in the Language field and select TypeScript.

6. Click the OKAY button.

Figure 20 - Add the ClickSector function

7. Click the Copy button on the below code block.

8. Paste the code block over the template in the Code Editor.

ClickSector

function ClickSector(five: Five, context: any, result: FiveError) : FiveError {
    five.setVariable('Sector', context.xValue);
    five.selectAction('StocksinSector');
    return five.success(result);
}

9. Click the Save Current Tab button.

Figure 21 - Save Current Tab button

Attach the ClickSector Function

The Investment Analysis chart record has two chart area datasets. We need to attach the

ClickSector()

function to the On Click event for the Investment by Sector chart area dataset. When a slice of the pie chart is clicked, the event will execute and select the data view.

1. Click Visual in the Menu.

2. Click Charts in the sub-menu.

Figure 22 - Charts menu item

3. Select the Investment Analysis record in the list.

4. Click the Datasets tab.

Figure 23 - Datasets tab

5. Select the InvestmentBySector (Query) record.

Figure 24 - InvestmentBySector (Query) record

6. Click the Chart Area Datasets tab.

Figure 25 - Chart Area Datasets tab

7. Select the Investment by Sector record.

Figure 26 - Investment by Sector record

8. Click the Events tab.

Figure 27 - Events tab

9. Either click the Edit button in the form app bar, or click directly in the On Click field.

10. Click the lookup icon in the On Click field and select ClickSector.

Figure 28 - On click event

11. Click the Save button in the form app bar.

Figure 29 - Save button

12. Click the Save button in the form app bar above the list.

Figure 30 - Save button

Add the PreviousAction Function

When in Five's Code Editor you will be interacting with Five's API. In the

PreviousAction()

function you will be using the following function.

previousAction()

- is a function on the

Five

object that takes you back to the previous selected action. Optionally, you can pass in a number to go back several actions.

1. Click Logic in the menu.

2. Click Code Editor in the sub-menu.

Figure 31 - Code Editor menu item

3. Click the Add New Code button.

Figure 32 - Add New Code button

4. Type PreviousAction in the Function ID.

5. Click the lookup icon in the Language field and select TypeScript.

6. Click the OKAY button.

Figure 33 - Add the PreviousAction function

7. Click the Copy button on the below code block.

PreviousAction

function PreviousAction(five: Five, context: any, result: FiveError) : FiveError {
    five.previousAction();
    return five.success(result);
}

8. Paste the code block over the template in the Code Editor.

9. Click the Save Current Tab button.

Figure 34 - Save Current Tab button

Add an Action Button

The Stocks in Sector data view needs an action button with the

PreviousAction()

function attached to the On Press event. When the button is clicked, the event will execute and select the previous action.

1. Click Visual in the menu.

2. Click Data Views in the sub-menu.

Figure 35 - Data Views menu item

3. Select the Stocks in Sector record.

4. Click the Action Buttons tab.

Figure 36 - Action Buttons tab

5. Click the Add Action Buttons button.

Figure 37 - Add Action Buttons button

6. Type Back To Chart in the Caption field.

7. Click the Events tab.

Figure 38 - Events tab

8. Click the lookup icon in the On Press field and select PreviousAction.

9. Click the Save button in the form app bar.

Figure 39 - Save button

10. Click the Save button in the form app bar above the list.

Figure 40 - Save button