HTMLSnippet - How add a parameter in code

0
Hi,   I have that:   And I want that this "20" of the width be a parameter that I sent to the page through a microflow Is this posible? Can I add a parameter using jQuery or CSS? If so, how do I bind it?  
asked
2 answers
0

Hi Fanny,

Just download JavaScript Snippet from mendix marketplace where you will get an option to select parameter attribute.

answered
0

Hi, I finally found the solution, I'm sharing it in case it helps:

 

I have 4 things:

1. Dataview that contains:

2. HTMLSnippet with Context

3. HTMLSnippet with Context

4. Text

 

image.png

 

In the dataview, the entity Path is the parameter of the page: 

image.png

 

In the first HTMLSnippet is content-type HTML and I have this code:

image.png

 

 

<div class="card">  <div class="progres-container">    <div class="progres-bar">0%</div>  </div></div>

<style>  .progres-container {    width: 100%;    background-color: #e0e0e0;    border-radius: 20px;    overflow: hidden;    height: 25px;    position: relative;    margin: 10px;  }

  .progres-bar {    height: 100%;    background-color: #4caf50;    display: flex;    align-items: center;    justify-content: center;    color: white;    font-weight: bold;    position: absolute;    top: 0;    left: 0;    font-family: Arial;    transition: width 0.5s ease;  }

  .card {    margin: 30px;  }</style>

 

The second HTML Snippet is context-Type JavaScript with Jquery and I have this code:

image.png

console.log("JS cargado correctamente");

$(document).ready(function () {  const checkValor = setInterval(function () {    const valorTexto = $('.valorPorcentaje').text().trim();    console.log("Texto leído:", valorTexto);

    if (valorTexto.length > 0) {      clearInterval(checkValor);      const porcentaje = parseInt(valorTexto.replace('%', '')) || 0;      console.log("Porcentaje parseado:", porcentaje);

      $('.progres-bar')        .css('width', porcentaje + '%')        .text(porcentaje + '%');    }  }, 200);});

 

The Text have in caption {1}% in parameters a paremeter of page (this parameter is a atribute of Entity of the domain model, the same as the dataview) 

image.png

 

A important thing is put in Class of the text the same name that you use in JS code, in my case "valorPorcentaje"

 

image.png

 

We want this text to save the data, we will remove the visibility if we want.

That's it, this is how it looks:

image.png

It's a Progressbar but made from scratch, since the widget one didn't work well for me, but it can be extrapolated to anything in which we need to put a parameter in a CSS property.

answered