Guide: Report HTML View

You can transform standard report data into something dynamic and visually appealing using the HTML View feature. This guide will walk you through the process step-by-step.

Step 1: Activate HTML View

1. Navigate to the report you wish to customize.

2. In the module settings, find the View dropdown menu.

3. Select HTML from the list. This will enable the HTML editor for your report.

Step 2: Understand the Editor

Once in HTML View, you'll see a powerful interface that includes:

• Variable Tree (Left): This panel lists all available data columns from your report. You can access both base dataset columns (c_...) and view-specific columns (vc_...).

• Rich Text Editor (Center): This is where you will build your view. You can add variables, write text, and insert HTML code here.

• Live Preview (Bottom): A real-time preview of your HTML output is displayed below the editor, allowing you to see your changes as you make them.

Step 3: Add Variables to the Editor

For this example, I will use three custom columns: This Month Giving, Last Month Giving, and This Year Giving. I will be creating some simple widgets that can display these columns.

1. Locate the desired variables in the Variable Tree.

2. Double-click a variable to insert it into the Rich Text Editor.

3. The corresponding value from your report data will immediately appear in the Live Preview area.

Note: If you would like to learn more about our reporting tool we have documentation as well as a number of videos you can view.

Step 4: Insert Custom HTML and CSS

To style your data, you'll use the Source Code editor.

1. Click the Source Code icon (</>) in the editor's toolbar. A new window will pop up.

2. This is where you can enter your custom HTML and CSS to structure and style the variables. You can write your own code or use an AI tool like Google Gemini to generate it for you.

3. Paste your code into the Source Code window. Keep in mind that the Rich Text Editor will automatically escape some HTML tags.

Note: To ensure your custom code doesn't interfere with the rest of the page it's published on, avoid using broad CSS selectors (ex. body) or including external libraries (ex. tailwindcss) that alter the global styling of the page. Keep your CSS self-contained by using specific class names for your widgets.

Step 5: Preview and Save

After adding your code, you can see the final result. The raw variables I added earlier are now transformed into beautifully styled widgets, and the live preview shows exactly how they will appear on the front end.

Once you are satisfied with the result, click Save.

With the power of the HTML View, you can create spectacular, custom data visualizations with little to no prior coding experience.