Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

The ultimate Microsoft Fabric, Power BI, Azure AI & SQL learning event! Join us in Las Vegas from March 26-28, 2024. Use code MSCUST for a $100 discount. Register Now

v-yiruan-msft

Card Browser – A document set viewer featuring flappable

Introduction:

Card Browser is a collection viewer with flippable double-sided thumbnails for natural navigation of your media collection. The preview side of each card presents the story's title image and source with text samples, enabling quick discovery of interesting documents. Flip the card to reveal the Meta Data side, which lists the document properties. Click on a card to expand it into place for detailed information

 

Mostly, we introduce enterprise employees, store Information and newly developed products through PPT. Now, we can achieve this goal through the card browser.

 

Scenario:

Bob has opened a new pet shop with lots of cute animals, and now he wants to introduce them to everyone through Card Browser visual. Let us start creating this interesting report!

 

Steps:

Preliminary preparation: Card Browser visual is a custom visual, so you need add it in Get more visuals. Then you can see the Card Browser display in Visualizations.

yingyinr_0-1654827206672.pngyingyinr_1-1654827212154.pngyingyinr_2-1654827220921.png

 

Introduction to visual properties:

Document ID: Unique ID for the document

 

Title: Title of the document, shown on cards and in the reader

 

Preview: If you put fields in it, you can only see the value of the field on the front of the card even you have put field in Content.

 

Content: A detailed introduction to the protagonist of the card, the content needs to be reflected in html format.

 

Title Image (URL): Main image(s) for the document, shown on cards and in the reader. Mainly reflect the protagonist of this card in the form of pictures.

You can refer to Image URL in Power BI to study add URL in Power BI.

 

Subtitle Fields: The second-level title can be used to reflect the title of the person, the breed of the animal, etc. The case here is used to reflect the breed of the pet.

 

Badge (Image URL): Put badges in the upper right corner of the cards, you can choose the badge image you like to highlight some of the cards.

 

Metadata Fields: Key-value pairs for the table on the back of the cards. In this case, I used it to introduce detailed attributes of each small pet, such as age, gender, etc.

 

Top Bar Color: Color of the bar at the top of the cards. Content must be in hex color code format.

 

Sorting Field: Field that can be used to sort the visual’s data based on an arbitrary column. You can sort the cards with the column you put in Sorting Field.

 

Configuration:

1. Create a pet table that can contain their name, gender, age, detailed introduction, pictures, etc.      yingyinr_5-1654827273783.png

2. Put these fields in the corresponding visual attributes.

yingyinr_7-1654827552974.pngyingyinr_8-1654827590562.pngyingyinr_9-1654827603908.png

You will get a visual like the following.

yingyinr_10-1654827624362.png

You can see the different colors at the top of the cards. It depends Top Bar Color. Then you can see the pictures of each pet. It depends on Title Image (URL). Next is the breed description for each small pet, it depends on Subtitle Fields. Then next is the detailed information about each pet, it depends on Content. You will notice a logo on the last Labrador picture. You can directly mark the card you want others to notice through the URL of your favorite logo. You can do this by adding a field to Badge (Image URL).

 

When we select one of the cards, the bottom will also expand to display all the information on the front and back of the card.

 

3. The above content is about the information at the front of the card. In the beginning of the introduction, we mentioned that Card Browser is a collection viewer with flippable double-sided thumbnails. So, we are going to show how to set the content of the back of the card.

 

There is a setting in the visual that is related to show the front and back of the card. When you turn on Flip, you can see the front and back of the card, but when you turn it off, you can only see the content that you choose in Card Face instead of double sided.

yingyinr_11-1654827874091.png

After making sure Flip is turned on, we can add some properties to Metadata Fields, we can see a different page. Now the content displayed in the card is the content we added in Metadata Fields. You can still select one of the cards, and then expand to display the entire content.

yingyinr_12-1654827894141.png

yingyinr_13-1654827899857.png

We can also choose to click the iconyingyinr_20-1654828306734.png on the extension to hide all information. We can also switch the front and back of the card through the button yingyinr_21-1654828327530.pngabove the card.

 

4. You may notice that when I added the view properties, there were two properties that were not added. Next, I will give a detailed introduction to these two properties.

 

Preview:

I put column [Gender] in Preview, you can find that on the front of the card, the content disappears, only the content in the Title, Subtitle and Preview will be displayed.

 

If there is no content in Preview Field, the content in Content/Title/Subtitle will be displayed by default. If content is added to Preview Field, the content in Preview/Title/Subtitle will be displayed.

yingyinr_14-1654827933859.pngyingyinr_15-1654827939484.png

Sorting Field:

Sort your cards by integer column. In this case, I use column [ID] as the integer column. When I put column [ID] in Sorting Field, and Sort axis with ID, you can see the difference.

yingyinr_16-1654827968312.png

yingyinr_17-1654827972226.png

yingyinr_18-1654827977521.png

The above steps are the basic configuration of Card Browser visual. Of course, you can also set some background color and font size for this visual through Format your visual. These are similar to regular visuals, so I won't go into details here.

yingyinr_19-1654828007110.png

I hope my blog will help you know how to use Card Browser. Come and start your custom Card Browser visual journey! 

 

 

Author: Ye Tao

Reviewer: Kerry Wang & Ula Huang

Comments
Anonymous

This is a great feature! I am certain it will help so many, just like we do over at katpro technologies. Check out some of our reviews on G2! Or check out our website 

<a href="https://katprotech.com/">here</a>

Really neat visual. I have had some problems with consistency as to whether it displays the content in the whole box, or whether it makes me scroll to content.

Also, while content supports some HTML, <ol> ,<ul> and <li> don't seem to be supported - given they are pure formatting, it would be nice to have these.

Why the viusal is not PBI certified?

Will be great to know why this visual hasn't been certified yet