HTML Text – SVG n’apparait plus dans une App Canvas

  • HTML Text – SVG n’apparait plus dans une App Canvas

    Posté par Joris sur 17 décembre 2024 à 10h20

    Bonjour à tous,

    Je rencontre actuellement un problème avec l’affichage d’un bargraph SVG dans un composant HTML d’une application Canvas.
    Jusqu’à hier soir, tout fonctionnait parfaitement sans que je ne fasse de modifications particulières.

    Pourtant j’utilise cette technique à d’autres endroits dans mon application sans problème.

    Pour investiguer, j’ai tenté de créer un composant HTML simplifié avec un SVG “basique”, mais cela ne fonctionne pas non plus. Cela me laisse penser qu’il pourrait s’agir d’un problème plus global.

    Auriez vous aussi cette problèmatique ?
    Avez-vous trouvé une solution ou une piste d’explication ?

    Ci-dessous le code intégré à mon composant Html

    <pre class=”language-markup”>"<svg width='"&Container_SdToIdentify_13.Width&"' height='"&Round(HtmlText1_4.Height;0)-20&" '>

    <!-- Fond de l'élement HTML -->
    <rect x='0' y='10' width='"& Container_SdToIdentify_13.Width &"' height='"&Round(HtmlText1_4.Height;0)&"' rx='4' ry='4' fill='#D9D9D9' />

    <!-- Bar graph objectif -->
    <rect x='0' y='10' width='"& Round((Value(Label9_69.Text) * Round(Container_SdToIdentify_13.Width;0))/Round(Value(Last(Filter(type_product;ID=Last(Filter(type_product;ID=Last(Filter(OEE_Shift_Settings;punit_ID=Last(Current_punit).ID)).TypeProduct_ID)).ID)).theoreticalRate)*(Current_DurationShift/60);0);0) &"' height='"&Round(HtmlText1_4.Height;0)&"' rx='4' ry='4' fill='#F84040'/>

    <!-- Bar graph quantité -->
    <rect x='0' y='10' width='"& Round((Last(Filter(Shift_TempCounterOK;Period="Team")).TotalValue * Round(Container_SdToIdentify_13.Width;0))/Round(Value(Last(Filter(type_product;ID=Last(Filter(type_product;ID=Last(Filter(OEE_Shift_Settings;punit_ID=Last(Current_punit).ID)).TypeProduct_ID)).ID)).theoreticalRate)*(Current_DurationShift/60);0);0) &"' height='"&Round(HtmlText1_4.Height;0)&"' rx='4' ry='4' fill='#52CF7F'/>

    <line x1='"& Round((Value(Label9_69.Text) * Round(Container_SdToIdentify_13.Width;0))/Round(Value(Last(Filter(type_product;ID=Last(Filter(type_product;ID=Last(Filter(OEE_Shift_Settings;punit_ID=Last(Current_punit).ID)).TypeProduct_ID)).ID)).theoreticalRate)*(Current_DurationShift/60);0);0) &"'
    y1='0'
    x2='"& Round((Value(Label9_69.Text) * Round(Container_SdToIdentify_13.Width;0))/Round(Value(Last(Filter(type_product;ID=Last(Filter(type_product;ID=Last(Filter(OEE_Shift_Settings;punit_ID=Last(Current_punit).ID)).TypeProduct_ID)).ID)).theoreticalRate)*(Current_DurationShift/60);0);0) &"'
    y2='"& Round(HtmlText1_4.Height;0) &"'
    stroke='white'
    stroke-width='2'
    stroke-dasharray='5,5'
    />

    </svg>"

    J’ai remarqué que un autres utilisateurs semblent rencontrer le même problème
    HTML Text – SVG Suddenly Don’t show in Canvas app
    Mais aucune réponse intéressantes

    Merci d’avance pour votre aide !

    Joris a répondu Il y a 3 jours, 22 heures 3 Membres · 3 Réponses
  • 3 Réponses
  • DavidZed

    Membre
    17 décembre 2024 à 15h11

    Si ton application est lancée sur un navigateur en français, Power Apps va injecter des valeurs avec un séparateur décimal “,” dans ton SVG, or le SVG est en séparateur décimal “.”

    Tu dois mettre toutes tes valeurs dynamiques dans une fonction :

    Text( [Ton calcul] ; “0.00” ;”En-US”)

    Pour que ton SVG soit bien rendu quelque soit la langue du navigateur

    Edit: je viens de remarquer le Round( [calcul] ; 0 ) qui est censé rendre la valeur compatible, du coup je ne vois pas :p

  • Nelson

    Membre
    17 décembre 2024 à 16h56

    Bonjour Joris,

    Comme indiqué dans le lien que tu nous as partagé, as tu essayé sur une autre version ?

    Cela nous permettra de vérifier directement si ce souci vient bien d’une version précise de powerapps et cela nous évitera de chercher plus loin car si c’est bien une nouvelle version qui a cassé le fonctionnement de ce composant, on ne peut malheureusement que te dire de garder patience jusqu’à ce que MS sortent une version avec un patch à ce souci.

  • Joris

    Membre
    17 décembre 2024 à 21h49

    Merci pour vos retours !

    J’ai essayé de restaurer une ancienne version fonctionnelle de mon application, mais malheureusement cela n’a pas résolu le problème.

    Finalement, j’ai trouvé une solution en insérant mon SVG dynamique dans une image, au lieu d’utiliser un composant HTML. Cela m’a demandé quelques ajustements au niveau du code. Voici la version modifiée :

    <pre class=”language-markup”>"data:image/svg+xml;utf8, "&EncodeUrl("
    <svg xmlns='http://www.w3.org/2000/svg'>
    width='"&Container_SdToIdentify_13.Width&"' height='"&Round(Image9.Height;0)&" '>

    <!-- Fond de l'élement HTML -->
    <rect x='0' y='0' width='"& Container_SdToIdentify_13.Width &"' height='"&Round(Image9.Height;0)&"' rx='4' ry='4' fill='#D9D9D9' />

    <!-- Bar graph objectif -->
    <rect x='0' y='0' width='"& Round((Value(Label9_69.Text) * Round(Container_SdToIdentify_13.Width;0))/Round(Value(Last(Filter(type_product;ID=Last(Filter(type_product;ID=Last(Filter(OEE_Shift_Settings;punit_ID=Last(Current_punit).ID)).TypeProduct_ID)).ID)).theoreticalRate)*(Current_DurationShift/60);0);0) &"' height='"&Round(Image9.Height;0)&"' rx='4' ry='4' fill='#F84040'/>

    <!-- Bar graph quantité -->
    <rect x='0' y='0' width='"& Round((Last(Filter(Shift_TempCounterOK;Period="Team")).TotalValue * Round(Container_SdToIdentify_13.Width;0))/Round(Value(Last(Filter(type_product;ID=Last(Filter(type_product;ID=Last(Filter(OEE_Shift_Settings;punit_ID=Last(Current_punit).ID)).TypeProduct_ID)).ID)).theoreticalRate)*(Current_DurationShift/60);0);0) &"' height='"&Round(Image9.Height;0)&"' rx='4' ry='4' fill='#52CF7F'/>

    <line x1='"& Round((Value(Label9_69.Text) * Round(Container_SdToIdentify_13.Width;0))/Round(Value(Last(Filter(type_product;ID=Last(Filter(type_product;ID=Last(Filter(OEE_Shift_Settings;punit_ID=Last(Current_punit).ID)).TypeProduct_ID)).ID)).theoreticalRate)*(Current_DurationShift/60);0);0) &"'
    y1='0'
    x2='"& Round((Value(Label9_69.Text) * Round(Container_SdToIdentify_13.Width;0))/Round(Value(Last(Filter(type_product;ID=Last(Filter(type_product;ID=Last(Filter(OEE_Shift_Settings;punit_ID=Last(Current_punit).ID)).TypeProduct_ID)).ID)).theoreticalRate)*(Current_DurationShift/60);0);0) &"'
    y2='"& Round(Image9.Height;0) &"'
    stroke='white'
    stroke-width='2'
    stroke-dasharray='5,5'
    />

    </svg>")

    Donc je penche plus sur un problème MS

Connectez-vous pour répondre.