1

How to build the GO sales performance report This document describes how to create seven of the core pieces of this advanced sample report:

Contents 1. Navigation Menu ....................................................................................................................................... 2

Layout........................................................................................................................................................ 2

Hover Effect .............................................................................................................................................. 2

2. Drill-Through Definition ............................................................................................................................ 4

3. Text Item with Report Expression ............................................................................................................. 6

4. Quarter Dropdown .................................................................................................................................... 7

Header Text ............................................................................................................................................... 7

Styling ........................................................................................................................................................ 7

5. Swap Measures ......................................................................................................................................... 9

Swap Measure........................................................................................................................................... 9

Selection Effect ....................................................................................................................................... 12

6. KPI Images ............................................................................................................................................... 13

7. Hover Effect on List ................................................................................................................................. 17

8. Data Format ............................................................................................................................................ 19

2

1. Navigation Menu This sample report contains a navigation menu on the left. It is used to present direct links to related content. Layout The entire report is laid out in a Table with two columns. The left column (Table Cell) contains the navigation panel:

A sub-table lays out the navigation items. The first item (Sales Map) is a drill-through to a related report, and the next three items (Documentation, Community, How to build this report…) are Hyperlinks. Hover Effect When the user moves their mouse over one of the items in the navigation menu, it is highlighted in blue. This effect is created with HTML Items:

3

Procedure

1. From the Toolbox , open the Advanced section and drag an HTML item onto the report above the Table.

2. Double-click the new HTML Item and type:

<style> .NavigationMenu_Hover { cursor: pointer; } .NavigationMenu_Hover:hover { outline: 7px solid #45A5D8; background-color: #45A5D8; color: white; text-decoration: none; } a:visited { color: #003868; background-color: #003868; text-decoration: none; } a:active { color: #45A5D8; background-color: #003868; text-decoration: none; } a:link { color: #003868; background-color: #003868; text-decoration: none; } a:hover { color: #45A5D8; background-color: #45A5D8; text-decoration: none; } </style>

3. Drag another HTML Item onto the report above the first Hyperlink. 4. Double-click the new HTML Item and type: <span class="NavigationMenu_Hover"> 5. Drag another HTML Item below the first Hyperlink. 6. Double-click the new HTML Item and type: </span>

4

2. Drill-Through Definition The GO sales performance report drills through to another report named GO sales map, passing the value of the current quarter.

Procedure

1. Select the Sales map Text Item in the navigation panel:

2. Open the Properties and click the ellipsis button beside the Drill-through definitions property.

3. Click New Drill-Through Definition

4. Click Rename and type “Go to Map” and click OK. 5. Click the ellipsis button beside Report:

6. Navigate to Team content > Samples > Reports, select GO sales map, and click Open. 7. Check Open in new window:

8. Click Edit under Parameters. 9. For pQuarter, specify the following:

a. Method: Pass parameter value b. Value: pQuarter

5

c. The dialog should look like this:

d. Click OK and OK.

10. Select the Text Item again, open the Properties, scroll down to Classes, and remove the Hyperlink class.

6

3. Text Item with Report Expression To create a dynamic Text Item with content that changes based on the value of a parameter on the report, use a report expression. Procedure

1. From the Toolbox , open the Pinned section and drag a Text item onto the report. 2. In the resulting dialog, click OK.

3. Open the Properties and change the Source type to Report expression. 4. Click the ellipsis for the Report expression property. 5. Type:

if (ParamDisplayValue('pColumn') is null) then ('Revenue') else (ParamDisplayValue('pColumn'))

6. Click OK.

7

4. Quarter Dropdown Header Text By default, Value Prompts display their parameter as their Header Text:

You can eliminate the Header Text.

Procedure

1. Select the Value Prompt.

2. Open the Properties and click the ellipsis button beside Header Text. 3. In the resulting dialog, select Specified text but don’t type anything in the box (not even a

space):

4. Click OK.

Styling You can apply styles (e.g. Background color, Font) to an individual Value Prompt. If you have multiple Value Prompts on one report, you can set the styles globally using Global Class Extensions. For a Value Prompt, you modify the Global Class Extension named Prompt control value box. Common properties to change are:

• Background color • Foreground color • Font • Size & overflow

8

Procedure

1. In the Navigation Menu, click Report > Classes. 2. Select Prompt control value box in the Global Class Extensions box.

3. Open the Properties , and make any required changes.

9

5. Swap Measures Swap Measure Suppose you have a chart that shows revenue (a measure) by country, but you also want to be able to show gross profit (another measure) by country on the same chart? You need to be able to swap the measure without creating another chart. You can do this with JavaScript.

Procedure

1. Add a Value Prompt to the report to create pColumn, and make it hidden:

a. From the Toolbox , open the Prompting section and drag a Value prompt onto the bottom of the navigation menu’s table in a table cell

b. Configure the value prompt: i. Parameter: pColumn

ii. No query iii. Static choices: Revenue, Gross Profit iv. Required: No v. Default selections: Revenue

vi. Name: ColumnPromptControl

c. Select the table cell that holds the value prompt, open the Properties , and set Box type: None to hide it.

2. Add one or more Custom Controls to the report. From the Toolbox , open the Advanced section and drag a Custom control onto the report. With the Custom Control selected, set the following properties:

a. Module path: /bi/samples/js/SwapMeasures/SwapMeasures.js b. Configuration:

i. The Parameter must be identical to the parameter created in Step 1 above (e.g. pColumn)

ii. Use Hover label color and Hover background color to set the colors when the user moves their mouse over the label.

iii. The Button value must be identical to the Ref property of the data item

1. To verify, right-click Revenue in the Sources tab and select Properties

10

and

3. How does it work? Each Custom Control creates a clickable Div in the form of a text item (outlined in red below) that sets a specific measure specified in the configuration (Button value):

Revenue: { "Parameter": "pColumn", "Button label": "Revenue", "Button value": "[C].[C_GO_revenue].[sheet1].[Revenue]" }

Gross Profit: { "Parameter": "pColumn", "Button label": "Gross Profit", "Button value": "[C].[C_GO_revenue].[sheet1].[Gross_Profit]" }

4. Create a new query item to hold the swappable measure. a. In the Navigation Menu, click Report > Queries. b. Double-click qMain. c. Drag a Query Calculation from the Insertable objects panel onto the Data Items panel:

i. Name: Swap Measure ii. Expression Definition:

11

# prompt('pColumn','token','[C].[Sample_Data_Module].[sheet1].[Revenue]') #

Note: This is a prompt macro in the query:

prompt ( prompt_name , datatype , defaultText , text , queryItem , trailing_text ) Prompts the user for a single value or member. Only "prompt_name" is required. The datatype defaults to 'string' when it is not specified. The prompt is optional when "defaultText" is specified. "Text", when specified, will precede the value. "QueryItem" can be specified to take advantage of the prompt information properties of "queryItem". "Trailing_text", when specified, will be appended to the value.

We have to specify the defaultText (e.g. [C].[Sample_data_module].[sheet1].[Revenue]) or else the data item will be empty when we first run the report.

d. Once created, select the new data item Swap Measure and set the following properties:

i. Label: Value ii. Detail aggregation: Calculated

1. Note: This will make it a “measure” 5. Use the swappable measure in a visualization (or List):

a. From the Toolbox , drag a Visualization onto the report. b. Select Clustered bar and click OK.

c. From the Data Items tab, expand qMain and drag: i. Swap Measure to the Value slot

ii. Country to the X axis slot

12

Selection Effect When the user selects one of the KPI items, it is highlighted in blue. This effect is created with a Conditional Style on the Table Cell. Procedure

1. Select the Table Cell that holds the Custom Control for Revenue.

2. Open the Properties and click the ellipsis button beside Conditional styles.

3. Click New Conditional Style and select Advanced conditional style… 4. Give it a Name: Revenue Selected

5. Click New advanced condition 6. In the Expression Definition box, type ParamDisplayValue('pColumn') is null

7. Click New advanced condition 8. In the Expression Definition box, type ParamDisplayValue('pColumn') = 'Revenue'

9. Click the Edit Style icon for the first condition and set the following: a. Font: Bold b. Background color: 5AAAFA c. Foreground color: Black

10. Click the Edit Style icon for the second condition and set the following: a. Font: Bold b. Background color: 5AAAFA c. Foreground color: Black

11. Click OK and OK 12. Do the same for Gross Profit

13

6. KPI Images The KPIs are text items within a singleton that have been conditionally styled to show a background image. Procedure

1. Select the Text Item.

2. Open the Properties and set the following: a. Data format: Percent; Percentage symbol: %; Number of decimal places: 1 b. Size & overflow: 80px 24px

3. Click the ellipsis button beside the Conditional styles property

4. Click New conditional style > New conditional style 5. Ensure that YtY Revenue is selected 6. Change Type of conditional style to Numeric range and click OK

a. Name: KPI Revenue

b. Click New Value and type 0 and click OK

c. Raise the 0 above the line by clicking the blue up arrow : d. Click the Edit Style icon for values above 0:

e. Click the Edit icon for Font and set it to Normal Bold 10pt Arial f. Set the Foreground color to White g. Click the Edit icon for Padding and set it to Top 5px Right: 7px h. Set Horizontal alignment to Right i. Set Vertical alignment to Middle

14

j. The completed dialog will look like this:

k. Click the Advanced tab l. Click the Edit icon for Background Image m. Click the Specified radio button n. Image URL: /bi/samples/images/kpi/Green_Up.svg

i. Note. This is the image: o. Position: Align top left p. Tiling: Do not tile q. The completed dialog will look like this:

r. Click OK and OK

15

s. Click the Edit Style icon for values below 0:

t. Click the Edit icon for Font and set it to Normal Bold 10pt Arial u. Set the Foreground color to White v. Click the Edit icon for Padding and set it to Top 5px Right: 7px w. Set Horizontal alignment to Right x. Set Vertical alignment to Middle y. The completed dialog will look like this:

z. Click the Advanced tab aa. Click the Edit icon for Background Image bb. Click the Specified radio button cc. Image URL: /bi/samples/images/kpi/Red_Down.svg

i. Note. This is the image: dd. Position: Align top left ee. Tiling: Do not tile

16

ff. The completed dialog will look like this:

gg. Click OK and OK and OK

17

7. Hover Effect on List

When the user moves their mouse over one of the items in the List, it is highlighted in blue. This effect is created with HTML Items:

Procedure

1. From the Toolbox , open the Advanced section and drag an HTML item onto the report above the List.

2. Double-click the new HTML Item and type:

<style> .List_Hover { cursor: pointer; } .List_Hover:hover { outline: 2px solid #5AAAFA; background-color: #5AAAFA; font-weight: bold; } </style>

3. Unlock the report by clicking Lock Page Objects

18

4. Drag another HTML Item onto the report and drop it to the left of the first item (e.g. <Country>) in the list:

5. Double-click the new HTML Item and type: <span class="List_Hover"> 6. Drag another HTML Item onto the report and drop it to the right of the first item (e.g.

<Country>) in the list:

7. Double-click the new HTML Item and type: </span>

19

8. Data Format The value for Revenue could potentially be in the thousands, millions, or even the billions. We can account for this with a conditional style. Procedure

1. In the List, select the column (e.g. List column body) that contains Swap Measure.

2. Open the Properties and click the ellipsis button beside Conditional styles.

3. Click New conditional style and select Advanced Conditional Style… 4. In the Name box, type Swap Measure Data Format

5. Click New advanced condition and type [qMain].[Swap Measure] > 1000 and click OK.

6. Click New advanced condition and type [qMain].[Swap Measure] > 1000000 and click OK.

7. Click New advanced condition and type [qMain].[Swap Measure] > 1000000000 and click OK. 8. Note: The order that you create (place) the conditions is important. Each rule in the dialog is

fired in order from top to bottom, and you want to trap the number at the correct time.

9. Click the Edit Style icon beside the first rule:

10. In the resulting dialog, click the Edit icon beside Data format:

20

11. Change the Format type to Number. 12. Set the Scale to -9 13. Set the Pattern to $###.#B and click OK and OK.

14. Click the Edit Style icon beside the second rule.

15. In the resulting dialog, click the Edit icon beside Data format. 16. Change the Format type to Number. 17. Set the Scale to -6 18. Set the Pattern to $###.#M and click OK and OK.

19. Click the Edit Style icon beside the third rule.

20. In the resulting dialog, click the Edit icon beside Data format. 21. Change the Format type to Number. 22. Set the Scale to -3 23. Set the Pattern to $###.#K and click OK and OK.

24. Click the Edit Style icon beside the fourth rule.

25. In the resulting dialog, click the Edit icon beside Data format. 26. Change the Format type to Currency and click OK and OK and OK and OK. 27. Note: The conditional style named Swap Measure Data Format can be used in all four places

indicated below because they all use the same query (qMain) and the same data item (Swap Measure):