Creating a page template

Pam decides that she wants all of her pages to have the same basic layout, look, and feel. Therefore, she decides that, as her next step in creating her final report, she will create a page template that can be used as the basis for all of the pages in her report. This will take some initial work to complete but will save a tremendous amount of time later on as pages are added to the report. Think of the value of a template page this way: instead of setting up the layout and format for each page of a report, we do these operations once instead.

The Template page that we will create will look as follows:

Figure 1 – Completed page Template

If you want to skip the creation of this template, download the LearnPowerBI_Ch6TemplateOnly.zip file from https://github.com/gdeckler/LearnPowerBI/tree/master/Ch6. Otherwise, follow these steps to create the page template:

  1. Start by creating a page and renaming this page Template.
  2. Next, set the background color for the page by using the Format sub-pane of the VISUALIZATIONS pane, expanding Page background, and selecting the last color in the top row under Theme colors, #D3DCE0, Theme color 9. Set the Transparency to 0 %.

To aid her in laying out the visuals on her pages, Pam decides to activate positioning and layout tools by clicking on the ribbon's View tab. In the Show section, she checks the boxes next to Show Gridlines and Snap Objects to Grid. Pam can now see faint white dots on the canvas laid out in a grid pattern.

Pam has decided that the right-hand side of each page will be reserved for slicers that the end users can use to create various views of the visualizations on the page focused on their desired information. In order to mark this area off as separate, Pam decides to create a rectangle to mark where she will place the slicers.

To do this, follow these steps:

  1. Select the Home tab. In the Insert section, select Shapes and then Rectangle.
  2. Position the rectangle in the upper-right of the page canvas.
  3. Next, adjust the size of the rectangle to take up the entire length of the page and the first three vertical grid lines from the right-hand side of the page. Notice how the rectangle size jumps as you adjust the size horizontally. This is the snap to grid feature.
  4. With the rectangle selected, expand the Fill section of the Format Shape pane and change the Fill color to the fourth color in the top row from the left, #3C3C3B, Theme color 3.
  5. Expand Line and change the Line color to this same color.
  6. Finally, adjust Round edges to 10 px.

Pam decides that she should title this area. To do so, follow these steps:

  1. From the Home tab of the ribbon, choose Text Box from the Insert section.
  2. Place this visual at the top of the rectangle (outside the top edge) and resize it so that it fits the available area.
  3. Type CONTROLS into the Text Box.
  4. Double-click the word CONTROLS and change font to Segoe (Bold).
  5. Increase the font size to 24 and Center the text.
  6. Finally, change the font color to #E5EAEE, Theme color 4.

The final position of the textbox can be checked in the General section of the VISUALIZATIONS pane and adjusted if necessary:

  • X Position: 1056
  • Y Position: 16
  • Width: 224
  • Height: 48

Next, Pam wants to show a relative date slicer at the top of this rectangle. Follow these steps to add the slicer:

  1. Click on a blank area of the canvas, expand the Calendar table in the FIELDS pane, and select Date.
  2. Switch this new visualization to a Slicer.
  3. Shrink this visual to the minimum vertical size where the sliders still show and move this slicer so that it's centered directly underneath the CONTROLS textbox. Red guidelines will appear to aid in positioning.
  4. Adjust the horizontal size as necessary. 

The numbers for the dates are hard to read. To correct this, follow these steps:

  1. In the Format sub-pane, expand the Data inputs section for the slicer and change the Font color to #E5EAEE, Theme color 4.
  2. In the Field area for the slicer, in the FIELDS sub-pane of the VISUALIZATIONS pane, double-click Date and rename this to Dates.

This renames the field for this specific visualization and does not change the column name. You can always view the source of the column by hovering the mouse cursor over the field name and viewing the popup, as follows:

  1. Switch to the Format sub-pane, expand Slicer header, and change the Font color to #E5EAEE, Theme color 4.
  2. Increase the Font size to 14 and the Font family to Segoe (Bold).
  3. Finally, adjust the vertical size until Dates increases to its proper size and the yellow warning disappears from the Slicer header area.

The slicer should have the following sizes and coordinates, which you can check in the General section of the Format sub-pane:

  • X Position: 1072
  • Y Position: 64
  • Width: 192
  • Height: 160

Next, Pam wants to use the Target Utilization slicer she created earlier. To add this slicer to the page, perform the following steps:

  1. Switch to the tmpUtilization page.
  2. Select the Target Utilization slicer and use Ctrl+C to copy this visual.
  3. Switch back to the Template page and use Ctrl+V to paste this slicer onto the page.
  4. The Sync visuals dialog will be displayed, indicating that the visual can stay in sync with the source visual that it was copied from. Choose the Sync button.
  5. Resize this slicer and position it underneath the Dates slicer. It is OK if the visuals overlap.
  6. Format the Numeric inputs to use a Font color of #E5EAEE, Theme color 4.
  7. Format the Slicer header to have a Font color of #E5EAEE, Theme color 4, a Text size of 14and a Font family of Segoe (Bold)

The slicer should have the following sizes and coordinates, which you can check in the General section of the Format sub-pane:

  • X Position1072
  • Y Position176
  • Width192
  • Height160

Pam also wants a slicer for branches. To create this, do the following:

  1. Click on a blank area of the canvas. This time, expand the People table in the FIELDS pane and choose Location.
  2. Switch this visual to a Slicer as well.
  3. Shrink this slicer vertically as well and make it the same width as the Dates slicer by editing the General section of the Format sub-pane and typing 192 in for the Width.
  4. Reposition this slicer underneath the Target Utilization slicer and center it within the rectangle. It is OK if the visuals overlap.
  1. Switch to the FIELDS sub-pane of the VISUALIZATIONS pane, double-click Location in the FIELDS area, and rename this to Branch. Changing the name here changes the name of the field in the visual but not the name of the column in the data model.
  2. Hover over the slicer. In the upper-right corner of the visualization, use the down arrow icon to switch this to a Dropdown slicer instead of a List slicer.
  3. Switch to the Format sub-pane, expand the Selection controls section, and toggle on Show "Select All" option.
  4. Next, expand the Slicer header section and change the Font color to #E5EAEE, Theme color 4.
  5. Increase the Text size to 14 and change the Font family to Segoe Bold.
  6. Similarly, expand the Items section, change the Font color to #E5EAEE, Theme color 4, Background to #3C3C3B, Theme color 3, and Text size to 14.
  7. Shrink the Height to 80.

This slicer should have the following General properties:

  • X Position: 1072
  • Y Position: 288
  • Width: 192
  • Height: 80

To create a Division slicer, perform the following steps:

  1. Select the Branch slicer and use Ctrl+C and Ctrl+V to copy and paste the slicer, respectively.
  2. Reposition this slicer directly underneath the original Branch slicer.
  3. Replace the slicer's Field with the Division column (not the Division Hierarchy) from the Hours table.

This slicer should have the following General properties:

  • X Position1072
  • Y Position: 384
  • Width: 192
  • Height: 80

To create a slicer based on the type of employee, follow these steps:

  1. Click on a blank area of the canvas and press Ctrl+V again to create a third slicer.
  2. Position this slicer directly underneath the Division slicer.
  3. Replace this slicer's Field with the EmployeeType column from the People table.
  4. Rename this Field in the VISUALIZATIONS pane Employee Type.

This slicer should have the following General properties:

  • X Position: 1072
  • Y Position: 480
  • Width: 190
  • Height: 80

These are the common slicers that Pam envisions on each page. However, she notices that since the Dates, Target Utilization, and Branch slicers overlap when she places the mouse cursor over certain portions of the Target Utilization and Branch slicers, the slicer above is selected instead.

To fix this, do the following:

  1. Select the Target Utilization slicer.
  2. Click on the Format tab of the ribbon. In the Arrange section, choose Bring forward and then Bring to front.
  3. Repeat this process for the Branch slicer.

Pam plans on creating a bookmark for each page that will reset all of the slicers and filters on the page. To plan for this, follow these steps:

  1. Insert a Reset button using Buttons from the Home tab of the ribbon.
  2. Shrink this button to the smallest horizontal width where the entire icon can be seen and reposition this button in the lower right-hand corner of the page.
  3. With the button selected, turn on Button Text in the VISUALIZATIONS pane.
  4. Expand this section and change the state to On hover.
  5. Enter Button Text as RESET.
  6. Change the font color to #E5EAEE, Theme color 4 and the Font family to Segoe (Bold).
  7. Change the Horizontal alignment to Center.

Pam also plans on using Drillthrough on some pages. To prepare for this, do the following:

  1. Copy and paste the Reset button and reposition it at the bottom-left of the rectangle.
  2. In the VISUALIZATIONS pane, expand the Icon section and change the Shape from Reset to Back.
  3. Expand the Button Text section, change the state to On hover, and replace the word RESET in the Button Text with BACK.
  4. Toggle on Action and for the Type, choose BACK.

Finally, Pam wants to brand all of the report pages with the corporate logo. To add the logo, follow these steps:

  1. Click on the Home tab of the ribbon and select Image from the Insert section.
  2. Select Packtlogo.png. This file can be downloaded from GitHub at https://github.com/gdeckler/LearnPowerBI/tree/master/Ch6.
  3. Shrink this image as necessary and place the image just above the buttons.

The completed Template page should now look like the screenshot that was shown at the beginning of this section: Figure 1 – Completed page Template

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.226.34.105