Forum Discussion

HervePittet's avatar
HervePittet
New Member
1 year ago
Solved

Boutons dynamiques avec image

Bonjour,

En fait, j'affiche des images dans une matrice de façon dynamique selon un paramètre. Dans ma table, j'ai les url des images et les url web. Je veux que l'image soit cliquable et dynamique comme la matrice pour pointer vers le lien url. Comment procéder ? J'ai essayer d'ajouter des boutons vides, mais je ne peux pas les dynamiser comme la matrice. Merci pour votre aide.

  • Hi HervePittet ,

    Thank you for reaching out to the Microsoft Community Forum.

     

    Please follow below steps:

    1.Use a matrix with image URLs + web URLs as hyperlinks
    a. Ensure Your Data Table Has: ImageURL: A URL to a hosted image (e.g., PNG, JPG) and WebURL: The target URL you want to navigate to when the image is clicked.
    b. Convert Web URL to a Hyperlink Format: Add a new column or measure that returns [WebURL].

    c. Add Image to Matrix: In the matrix visual, Put some categorical field in Rows (e.g., Product, BU). Drag the ImageURL into Values. Set the data category of ImageURL to Image URL. Go to the Modeling tab > select the column > Data Category > Image URL.

    d. Make Image Clickable via Tooltip: Unfortunately, images themselves aren’t clickable, but you can:

    Option A: Use a custom column with an HTML link (in a Power BI custom visual like HTML Viewer): Create a column like

    ImageLink = "<a href='" & [WebURL] & "' target='_blank'><img src='" & [ImageURL] & "' width='100'></a>"

    Use a custom visual like HTML Content Viewer from AppSource.

    Option B: Use a Button + Tooltip: You can't "energize" buttons dynamically in a matrix, but you can Use buttons with dynamic tooltips. Use bookmarks or field parameters to change visuals based on interaction (but not open external URLs dynamically).

    Option C: Use Card Visuals Dynamically: If you can restructure your report slightly, you can use card visuals bound to a dynamic measure, then make them act like buttons (with WebURL as the action).

    Note: Power BI matrix images are not clickable directly. Buttons cannot dynamically change their URL action (no dynamic hyperlink action yet).

    Workarounds often involve: Using HTML Viewer custom visual. Using dynamic tooltip visuals. Embedding images as HTML.

    2. Use Power BI Custom Visuals: HTML Viewer (by CloudScope): Accepts HTML, allows clickable images. Deneb (if you're familiar with Vega-Lite): Build custom visuals with links.

    3. Using Base64 Encoding: You can transfer the image to Base64 code and use it as an image URL to insert into a table. This allows you to use a slicer to filter the images dynamically. You can use websites like https://base64-image.de to convert your images to Base64 code. Then, copy the code to a table and set the column type to Image URL.

     

    please refer community thread
    https://community.fabric.microsoft.com/t5/Desktop/Dynamic-Images-based-on-Slicer-selection/td-p/3170912

     

    If my response has resolved your query, please mark it as the Accepted Solution to assist others. Additionally, a 'Kudos' would be appreciated if you found my response helpful.

     

    Thank you

4 Replies

  • v-dineshya's avatar
    v-dineshya
    Icon for Community Support rankCommunity Support

    Hi HervePittet ,

    Thank you for reaching out to the Microsoft Community Forum.

     

    Please follow below steps:

    1.Use a matrix with image URLs + web URLs as hyperlinks
    a. Ensure Your Data Table Has: ImageURL: A URL to a hosted image (e.g., PNG, JPG) and WebURL: The target URL you want to navigate to when the image is clicked.
    b. Convert Web URL to a Hyperlink Format: Add a new column or measure that returns [WebURL].

    c. Add Image to Matrix: In the matrix visual, Put some categorical field in Rows (e.g., Product, BU). Drag the ImageURL into Values. Set the data category of ImageURL to Image URL. Go to the Modeling tab > select the column > Data Category > Image URL.

    d. Make Image Clickable via Tooltip: Unfortunately, images themselves aren’t clickable, but you can:

    Option A: Use a custom column with an HTML link (in a Power BI custom visual like HTML Viewer): Create a column like

    ImageLink = "<a href='" & [WebURL] & "' target='_blank'><img src='" & [ImageURL] & "' width='100'></a>"

    Use a custom visual like HTML Content Viewer from AppSource.

    Option B: Use a Button + Tooltip: You can't "energize" buttons dynamically in a matrix, but you can Use buttons with dynamic tooltips. Use bookmarks or field parameters to change visuals based on interaction (but not open external URLs dynamically).

    Option C: Use Card Visuals Dynamically: If you can restructure your report slightly, you can use card visuals bound to a dynamic measure, then make them act like buttons (with WebURL as the action).

    Note: Power BI matrix images are not clickable directly. Buttons cannot dynamically change their URL action (no dynamic hyperlink action yet).

    Workarounds often involve: Using HTML Viewer custom visual. Using dynamic tooltip visuals. Embedding images as HTML.

    2. Use Power BI Custom Visuals: HTML Viewer (by CloudScope): Accepts HTML, allows clickable images. Deneb (if you're familiar with Vega-Lite): Build custom visuals with links.

    3. Using Base64 Encoding: You can transfer the image to Base64 code and use it as an image URL to insert into a table. This allows you to use a slicer to filter the images dynamically. You can use websites like https://base64-image.de to convert your images to Base64 code. Then, copy the code to a table and set the column type to Image URL.

     

    please refer community thread
    https://community.fabric.microsoft.com/t5/Desktop/Dynamic-Images-based-on-Slicer-selection/td-p/3170912

     

    If my response has resolved your query, please mark it as the Accepted Solution to assist others. Additionally, a 'Kudos' would be appreciated if you found my response helpful.

     

    Thank you

  • HervePittet 

    Open Power Query Editor:

    Go to Home > Transform data.
    Add a custom column:

    In the Power Query Editor, go to Add Column > Custom Column.
    Enter a name for the new column, e.g., Clickable Image.
    Use the following formula to create the HTML anchor tag:

    powerquery
    ="<a href='" & [WebURL] & "' target='_blank'><img src='" & [ImageURL] & "' style='width:100px;height:100px;'/></a>"

    Replace [WebURL] and [ImageURL] with the actual column names in your data.

     

    Click Close & Apply to return to the Power BI report view.

    Add a table or matrix visual to your report.
    Add the Clickable Image column to the values field.
    Go to the Format pane, and under Values, set the Data Category to Image URL.

    • HervePittet's avatar
      HervePittet
      New Member

      Merci pour votre réponse, néanmoins je n'y arrive toujours pas.

      Voici le code Power Query pour ma table Projets.

       

      let
      Source = Excel.Workbook(File.Contents("C:\Users\Willkommen\OneDrive\Docs_prives\HERVE\FORMATION\DATA_ANALYST_OC\PROJET_13\Projets.xlsx"), null, true),
      Feuil1_Sheet = Source{[Item="Feuil1",Kind="Sheet"]}[Data],
      #"En-têtes promus" = Table.PromoteHeaders(Feuil1_Sheet, [PromoteAllScalars=true]),
      #"Type modifié" = Table.TransformColumnTypes(#"En-têtes promus",{{"Projets", type text}, {"Lien_Image", type text}, {"Lien_site", type text}, {"ID", Int64.Type}}),
      #"Personnalisée ajoutée" = Table.AddColumn(#"Type modifié", "Personnalisé", each "<a href='" & [Lien_site] & "' target='_blank'><img src='" & [Lien_Image] & "' style='width:100px;height:100px;'/></a>"),
      #"Colonnes renommées" = Table.RenameColumns(#"Personnalisée ajoutée",{{"Personnalisé", "Image_cliquable"}}),
      #"Type modifié1" = Table.TransformColumnTypes(#"Colonnes renommées",{{"Image_cliquable", type text}})
      in
      #"Type modifié1"


      Je cherche à afficher les images dans mon rapport et lorsque je clique sur l'image, ça me renvoie vers le site internet du projet de ma table.

       

      Avez-vous besoin d'autres éléments ?

      Merci par avance pour votre retour.

  • I think you can have either image URLs or Web URLs, but not both at the same time.  You may have to use different visuals (HTLM5 viewer) to pull that off.