PBIX Flipping Sheets Designing Tips–Inspired by @Diana

Data Visualizations
1

When users open a Power BI report from their devices, they want to extract business intelligence insights rapidly by allowing the visuals tell the story in a compelling and engaging manner that prompts a decision. The detail of how the Power BI report Viz. insights/story gets to their devices isn’t important to non-PBIX developers.

@Diana eDNA-Power BI challenge-3 showed this engaging side by producing a flipping report from summary, detail to trend that leaves report users and data Viz. enthusiasts with a strong experience.

Her submission –winner of eDNA- Power BI Challenge-3.

I have gone through the process of recreating the flipping effect on my environment to share with the eDNA- community what it takes to give users such experience. This journey made me understand that the designing process embeds style and context promptly reusable in other reports based on the experience the developer wants to display.

In turn, I’ll share the tricks and tips to create this experience, as I believe is nice to have in your PBIX designing toolbox. I’ll go through the PowerPoint Designing Process and provide you with some features I use to create customized icons and shapes.

You’ll be provided with the entire Ms PowerPoint and PBIX templates to assist in your redesigning process, you may adjust PPP to feed your reporting context or recreate directly in the PBIX environment – ‘my top-up’.
image

Flipping Sheets Design Process

image
Adjust shape and color

• Highlight the oval shape, Click==> Format==>Shape fill
image
==>Set Text Outline to “No outline”

==>Adjust size (same height and width)

  • Based on your unique feeling you may adjust the gradient :
    Right click on the circle==>click format shape==>select gradient fill==>use the gradient stops to adjust==>the adjusted circle is on the bottom left

image
image624×510 69.3 KB

image
Fragment shapes (available only for Ms PowerPoint 2013+ - merge shapes is key to creating customized shapes and icons-)

  • Shade the unwanted portion of the circle with any shape

image

  • Hold the control key, click on both shapes –click on the circle first.
    image

  • Click Format ==> Merge Shapes ==> Fragment (try the other possibilities as they are essential for creating customized shapes –combine, union, intersect, subtract )

image

Click Format==> Fragment ( you will notice a change in the rectangle color since the circle is clicked first and vice-versa )

image
Dismantle fragments and select the ideal shape
image

  • Reproduce shape and fill colors

image

image
Designing the rectangular bars that amplifies the flipping effect ( Gradient is key)

  • Click ==>Insert ==>Shapes==> Rectangle

image
image565×864 114 KB

  • Right click on the rectangle ==>click format shape==>select gradient==>use the gradient stops to adjust==>you’ll find the adjusted rectangle at the extreme right

image
Designing the Flipping effect

  • You’re now set to design using shapes in step 3 & 4 –collection of below.
    image
    image
    image
    image
    image
    image
    image

Attached:

I’ll like to know your preference (remember to “Control” +”Enter” to feel the bookmark experience). If you like-thump up or leave a comment.

Thank you.

13 Likes
2

Amazing Walter.

This is superb

3

This whole idea and technique is so amazing.

Well done to @DianaB and @Walter for thinking of it and then adding it to the forum.

Sam

1 Like
4

wow

that a great!!!
Thanks for sharing your process.
Keith

1 Like
5

Good job Walter, I never thought my background will be that popular. :smiley:

2 Likes
6

@Walter Amazing work and a great share.

Thanks @DianaB for the inspiration.

Regards,
Haroon

2 Likes
7

@Walter @DianaB

Thank you, Walter for documenting the amazing work done by Diana!

1 Like
8

@sunip, your interesting inquiries on Diana’s HR-Insights Submission in Challenge-3 was a prime driver to this documentation. :slight_smile:

1 Like
9

@DianaB, I reviewed the comments after your HR-Insights Submission and the Winner’s announcement, I noticed the eDNA community showed interest in the design flow. I tried replicating the process on my environment adding a PBIX native version and voilà…

3 Likes
10

@Keith, I have benefited tremendously from this forum. I strongly believe the zeal of members in sharing their know-how is the key reason for staying-tuned. :ok_hand:

3 Likes
11

Hi All,

You can try your own design using the same idea, I have another one that I just created today. Is actually simpler, just rectangles and numbers you can use letters or an icon

Others
Others538×889 17.3 KB

Have fun,

Diana

4 Likes
12

@Diana, this is a simplified version and it still displays the same experience. Moreover, we don’t have to fragment.

eDNA is an erana for active ideation ! :

13

wow…thanks for sharing @DianaB

14

@Walter

Walter, I am trying to replicate this design and missing something. Did you import as custom theme from power point? I did followed the steps in power point and looking for some guidance on incorporating in pbix file. May be a recorded video will help.
Thanks in Advance!

15

Hi @sunip,

You need to save each page as a jpg and use it as a background en Power BI, then put a button over the text, make it invisible and as an action use the page you want to move. In the challenge #3 you can find my pbix for reference

2 Likes
16

@DianaB
Thank you, Diana!

1 Like
17

Really love it. Nice work Diana

1 Like