Multi-Column Layout

Creating Multi-Column Layouts in Power BI using the HTLM VizCreator visuals

Enhancing the visual layout of your Power BI reports often requires a creative arrangement of elements. This guide will walk you through the process of organizing text elements into a dynamic layout using HTML within Power BI, offering a clear and engaging presentation of your data. 

HTML's adaptability enables the customization of various elements, not only text. Whether you're dealing with images, text, or interactive components, HTML provides the tools to position and style them according to your needs. 

In our case, we will be using a simple table that includes some rows of Lorem Ipsum text.

Step 1:

Set up a parameter to enable dynamic layout adjustments. Head to the Modeling tab located in the main ribbon of Power BI. There, click on "New Parameter" and choose the "Numeric range" option. 

Enter the values, setting the minimum at 1 and the maximum at 5. While these values are adjustable to suit different needs, for this example, we're using a maximum of 5. This limit is chosen as it represents the number of columns we wish to display in our layout. As an increment, we will be using 1.  

Step 2:

Create a DAX measure in Power BI to dynamically generate an HTML layout for your text data. 

Start by defining a variable, concatenatedText, which employs the CONCATENATEX function to loop through the 'Text' table. For each row in the table, it extracts the content from the 'Text' column. These pieces of text are then seamlessly combined. Finally, the aggregated text is wrapped within a <div id='columntext'>, forming a unified block of HTML content.  

HTML =  
VAR concatenatedText = CONCATENATEX( 
    'Text',
    'Text'[Text], 
    "" 
) 
RETURN 
"<div id='columntext'>" & concatenatedText & "</div>" 

Step 3:

Create a CSS DAX measure to style your HTML layout into a grid.  

Start by defining a variable that retrieves the selected value from the 'No. of Columns' parameter. This variable dynamically sets the column-count property in the CSS, applied to an element with the ID columntext. The CSS also specifies a 26px gap between columns, justifies the text alignment, and adds a 1px solid rule for column separation. 

CSS =  
VAR var_columns = SELECTEDVALUE('No. of Columns'[Parameter]) 
RETURN 
"#columntext { 
    column-count:"&var_columns&";  
    column-gap: 26px; 
    text-align: justify; 
    column-rule: 1px solid rgba(28,110,164,0.68); 
} 
" 

Step 4:

Add our HTML VizCreator Flex visual to your Power BI page. If you don’t have the visual yet, it is available on Microsoft AppSource.  

Step 5:

Add the HTML measure you created into the HTML field well and the CSS measure into the CSS field well of the the visual.  

That’s all! Your text should now be neatly arranged in whatever layout you choose in your No. of Columns parameter, using the HTML VizCreator Flex visual. 

Remember, this functionality is not limited to text elements. There are various elements you can reorder in columns using the same approach. In our case, we prepared another example in the downloadable PBIX file below, reordering HTML created KPI Card. Feel free to explore the file and see the example.