diff --git a/docs/qodlyLookerStudio/img/IFrameComponentSandboxSettings.png b/docs/qodlyLookerStudio/img/IFrameComponentSandboxSettings.png new file mode 100644 index 0000000000..b70020d824 Binary files /dev/null and b/docs/qodlyLookerStudio/img/IFrameComponentSandboxSettings.png differ diff --git a/docs/qodlyLookerStudio/img/lookerAddChartButton.png b/docs/qodlyLookerStudio/img/lookerAddChartButton.png new file mode 100644 index 0000000000..ff6d81815a Binary files /dev/null and b/docs/qodlyLookerStudio/img/lookerAddChartButton.png differ diff --git a/docs/qodlyLookerStudio/img/lookerConfigureChartData.png b/docs/qodlyLookerStudio/img/lookerConfigureChartData.png new file mode 100644 index 0000000000..7655b33dc6 Binary files /dev/null and b/docs/qodlyLookerStudio/img/lookerConfigureChartData.png differ diff --git a/docs/qodlyLookerStudio/img/lookerCustomizeChartAppearance.png b/docs/qodlyLookerStudio/img/lookerCustomizeChartAppearance.png new file mode 100644 index 0000000000..73660044f3 Binary files /dev/null and b/docs/qodlyLookerStudio/img/lookerCustomizeChartAppearance.png differ diff --git a/docs/qodlyLookerStudio/img/lookerEmbedURLLink.png b/docs/qodlyLookerStudio/img/lookerEmbedURLLink.png new file mode 100644 index 0000000000..2482b45a82 Binary files /dev/null and b/docs/qodlyLookerStudio/img/lookerEmbedURLLink.png differ diff --git a/docs/qodlyLookerStudio/img/lookerEmbedURLQodlySource.png b/docs/qodlyLookerStudio/img/lookerEmbedURLQodlySource.png new file mode 100644 index 0000000000..5fbc45cc22 Binary files /dev/null and b/docs/qodlyLookerStudio/img/lookerEmbedURLQodlySource.png differ diff --git a/docs/qodlyLookerStudio/img/lookerEmbedURLReport.png b/docs/qodlyLookerStudio/img/lookerEmbedURLReport.png new file mode 100644 index 0000000000..87294935b0 Binary files /dev/null and b/docs/qodlyLookerStudio/img/lookerEmbedURLReport.png differ diff --git a/docs/qodlyLookerStudio/img/lookerReportEmbeddedinQodly.png b/docs/qodlyLookerStudio/img/lookerReportEmbeddedinQodly.png new file mode 100644 index 0000000000..c7f43d1c5a Binary files /dev/null and b/docs/qodlyLookerStudio/img/lookerReportEmbeddedinQodly.png differ diff --git a/docs/qodlyLookerStudio/img/lookerShareReport.png b/docs/qodlyLookerStudio/img/lookerShareReport.png new file mode 100644 index 0000000000..e979f89ce6 Binary files /dev/null and b/docs/qodlyLookerStudio/img/lookerShareReport.png differ diff --git a/docs/qodlyLookerStudio/qodlyLookerStudioConnector.md b/docs/qodlyLookerStudio/qodlyLookerStudioConnector.md index 7c3abc831f..a4c8b0dab6 100644 --- a/docs/qodlyLookerStudio/qodlyLookerStudioConnector.md +++ b/docs/qodlyLookerStudio/qodlyLookerStudioConnector.md @@ -188,3 +188,163 @@ Once your Qodly Looker Studio Connector is connected, you need to configure key Click "Add" to apply the settings and fetch the data. + +### Creating Reports in Looker Studio + +Now that the Qodly Looker Studio Connector is properly configured, you can create insightful reports using Looker Studio’s built-in visualization tools. Follow the steps below to add charts, configure data, add descriptive titles, and style your visualizations clearly and effectively. + +#### Step 1: Add a Chart + +In your Looker Studio report: + +1. Click the Add a chart button from the toolbar. +2. Choose your preferred chart type (e.g., Area Chart, Geo Chart, Time Series Chart, Bar Chart). +3. Click or drag the chosen chart onto your report canvas. + +#### Step 2: Configure Your Chart Data + +With your chart selected, use the Setup panel on the right side to configure your data: + + + + 1. Data Source: Select your configured Qodly data source.

+ 2. Dimension: Choose a categorical or date-based field (e.g., date, country, city).

+ 3. Metric: Select the numeric measure to visualize (e.g., amount, orderCount). + + + + + + +You may add optional filters or comparison dates to further refine your visualization. + +#### Step 3: Customize Chart Appearance + +Enhance readability and visual appeal: + + + + 1. Select your chart and click the Style tab in the right panel. + 2. Adjust color schemes, font styles, line thicknesses, and background colors. + 3. For maps, configure color gradients to effectively highlight differences in data values. + 4. Enable or disable legends, axis labels, and tooltips as needed to simplify interpretation. + + + + + + + +:::info Additional Charting Resources +For detailed guidance and advanced configuration options for different types of charts, refer to the official Looker Studio documentation [Chart references](https://cloud.google.com/looker/docs/studio/area-chart-reference). +::: + +### Embedding Looker Studio Reports in Qodly + +To embed Looker Studio reports directly into your Qodly application, you'll need to use the IFrame custom component. An iframe represents a nested browsing context, allowing another HTML page to be displayed seamlessly within your Qodly app page. + +#### Step 1: Install the IFrame Custom Component + +You can obtain the IFrame custom component directly from the [Custom Components list for Qodly Studio](https://github.com/qodly/custom-components?tab=readme-ov-file) in GitHub: + +1. Navigate to the [IFrame custom component repository](https://github.com/TihounaNasrallah/qodly-iframe). +2. Download the [latest release](https://github.com/TihounaNasrallah/qodly-iframe/releases/tag/0.1.2) (qodly_IFrame_version.zip) from the Releases page. + +Once downloaded, follow these steps: + +1. Open Qodly Studio. +2. Locate and click the dedicated [Upload button](../studio/pageLoaders/components/uploadCustomComponents#uploading-custom-component) in the Component bar. +3. Upload the downloaded qodly_IFrame_version.zip file. +4. [Install the custom component](../studio/pageLoaders/components/uploadCustomComponents#installing-custom-component) when prompted. + +After successful installation, refresh your Qodly Studio page. The new IFrame component will now appear in your components bar, ready for drag-and-drop onto your canvas. + +#### Step 2: Get the Looker Studio Embed URL + +In Looker Studio, open your desired report: + +1. Click Share , then select Embed report . + + + 2. Ensure "embed URL" is checked, then copy the provided link. + + + + + + +#### Step 3: Embed the Report into Qodly + +Return to your Qodly app page in Qodly Studio. + + + + 1. Create a new Qodly source of type String.

+ 2. Set the copied Looker Studio Embed URL as the default value for this source. + + + + + +3. Drag the newly installed IFrame component onto your canvas. +4. Assign the Qodly source (containing the embed URL) to the IFrame component. +5. Adjust the iframe dimensions to 600x450 pixels (or as needed). + +#### Step 4: Configure Sandbox Settings + +The IFrame custom component uses sandbox attributes to apply security restrictions to embedded content. To ensure your embedded Looker Studio report displays correctly, you must include appropriate sandbox attributes. Without these attributes, your report might not render or function properly. + + + + - allow-storage-access-by-user-activation: Experimental—enables embedded pages to request access to cookies via the Storage Access API.

+ - allow-scripts: Permits embedded pages to execute JavaScript (but not pop-up windows).

+ - allow-same-origin: If omitted, the embedded page is treated as from a unique origin, restricting certain browser functionalities.

+ - allow-popups: Allows pop-up windows (e.g., via window.open()). + + + + + + + +### Conclusion + +Ensure you regularly review permissions and access settings for your embedded reports, especially if sensitive business information is displayed. Keeping your embedded content secure and up-to-date helps maintain overall application integrity and performance. + +Now you're ready to see your report directly embedded within your Qodly application. + + + +