Tableau avec image et choix unique dans ce tableau

[mgtoukam]

Bonjour Tous

Je suis entrain de faire une étude comparative sur les besoins des consommateurs de boissons.

J'ai ce tableau dont je veux l'implémentation sur Cspro.

Voici la description complète du tableau

c'est un tableau en principe de 4 colonnes pour les boissons et à la première line nous avons les marques de boissons et 1ere colonne a les noms des entreprises et on a 6 lignes.
en principe on doit avoir un tableau de 5 lignes * 3 colonnes et dans chaque intersection (ligne, colonne) nous avons une image et on doit choisir une seule image de ce tableau.

merci de votre prompte réaction
Mixhel

[Gregory Martin]

One way to do this is to use a HTML dialog to show a table of images and then use JavaScript to send the result back to CSPro.

I used ChatGPT to create such a table (showing two kinds of drinks) and then coded the framework for this approach, which will work with CSPro 8.0+.

The HTML:

Code: Select all

<td><img src="images/dr-pepper.png" onclick="imageClicked('Dr Pepper')"></td>

The JavaScript:

Code: Select all

  function imageClicked(drink) {
    CS.UI.closeDialog({ 
      result: drink 
    });
  }

And the CSPro logic:

// show a HTML dialog to query for the drink selection
string result = CS.UI.showDialog(path := "choose-drink.html");

// the result is a JSON string, so we need to convert it to CSPro format
if result <> "" then
    string drink_text;
    drink_text.updateValueFromJson(result);

    DRINK_SELECTION = drink_text;
endif;

Here is the application:

choose-drink.zip