Solved

Server Application : How to create a dropdown menu for dashboards ?

  • 27 February 2023
  • 6 replies
  • 37 views

Hello,

I am currently working on a Server App that displays different dashboards.

Based on a published parameter the user can select one dashboard and is lead to the one selected. 

To fascilitate the usage I'd like to introduce a drop-down menu  (bearing the names of all published parameters options) on the very same page as the dashboard.  

So far I managed to do the menu:

<form method="post" action="">
    <p>
        <label for="pays">Quel dashboard ?</label><br> 
        <select name="dashboard" id="Dashboard">
            <option value="ctrl_job_dr">exemple1</option>
            <option value="ctrl_job_semaine">exemple2</option>
        </select>
    </p>
 </form>
 
 <input type="submit" value="Envoyer">

 

image 

Just inserting a link (href) does not work in this case for the link does only point to the fmw file.

Here's the request I get when I select a dasboard:

imageDoes someone has an idea of how to put that into an html form (drop-down menu)?

Thanks in advance !

icon

Best answer by mattmatsafe 28 February 2023, 18:04

View original

6 replies

Userlevel 5
Badge +25

Maybe I'm overlooking something obvious here, but why not make a choice user parameter on the workspace? That way FME Server will automatically create a dropdown for it.

Hello, I am affraid I expressed myself rather badly.

I do have a choice user parameter and FME Server creates a drop-down menu based on the entries.

Capture2BUT if I want to switch between the graphics/dashboards I have to return to this page to select another one.

I'd like to avoid that and simplify the switching by adding a drop down menu to the dashboar page.

Like so :

Capture 

Userlevel 1
Badge +15

Hello, I am affraid I expressed myself rather badly.

I do have a choice user parameter and FME Server creates a drop-down menu based on the entries.

Capture2BUT if I want to switch between the graphics/dashboards I have to return to this page to select another one.

I'd like to avoid that and simplify the switching by adding a drop down menu to the dashboar page.

Like so :

Capture 

Hi @lgrie​ just want to clarify, you don't want to have the choice/dropdown as a parameter but rather have it within the streamed HTML after submitting the server app?

 

If this is the case, you can edit the HTML within the HTMLReportGenerator transformer and selecting 'Custom HTML' in the page contents. This may present more issues such as hardcoding elements yourself; however, you can find more details on the use of HTML and FME here: How to Customize HTML Reports

Hi @lgrie​ just want to clarify, you don't want to have the choice/dropdown as a parameter but rather have it within the streamed HTML after submitting the server app? 

 

If this is the case, you can edit the HTML within the HTMLReportGenerator transformer and selecting 'Custom HTML' in the page contents. This may present more issues such as hardcoding elements yourself; however, you can find more details on the use of HTML and FME here: How to Customize HTML Reports

Hello @Evie Lapalme​ ,

You're guessing correctly, that is exactly what I want.

I am using a costum HTML in the generator to create the drop-down list.

The problem is that I just don't know how (or rather where) I should implement the elements "name" and *"opt_" into the menu shown above.

A collegue suggested to use the http address as the action value.

<form method="POST" action="http://server/fmeserver/apps/gallery_application/workspace_app/streaming/fmedatastreaming/directory/something.fmw">
    <p>
        <label for="pays">Quel dashboard ?</label><br> 
        <select name="Nom" id="Name">
            <option value="Exemple1">Exemple1</option>
            <option value="Exemple2">Exemple2</option>
        </select>
    </p>
    <input type="hidden" id="opt_servapp" name="opt_servapp" value="workspace_app" />
 </form>
 
 <input type="submit" value="Envoyer">

Where id is equal to the published parameter on the screen shot "image": Name, option values correspond to the published parameters and all "opt_" (also displayed on screen shot "image) are hidden.

Hi @lgrie​ just want to clarify, you don't want to have the choice/dropdown as a parameter but rather have it within the streamed HTML after submitting the server app?

 

If this is the case, you can edit the HTML within the HTMLReportGenerator transformer and selecting 'Custom HTML' in the page contents. This may present more issues such as hardcoding elements yourself; however, you can find more details on the use of HTML and FME here: How to Customize HTML Reports

Thing is that this option does NOT work !

Badge +7

Hi @lgrie​ just want to clarify, you don't want to have the choice/dropdown as a parameter but rather have it within the streamed HTML after submitting the server app? 

 

If this is the case, you can edit the HTML within the HTMLReportGenerator transformer and selecting 'Custom HTML' in the page contents. This may present more issues such as hardcoding elements yourself; however, you can find more details on the use of HTML and FME here: How to Customize HTML Reports

Hi @lgrie​ I noticed that your submit button is outside of your form element, that may be one of the problems. 

A more simple option might to just include a link back to the app on your streamed page, so you can reselect a dashboard from there. It's only one extra click. If you really want to try and save the extra click, create a data-streaming workspace webhook URL from your dashboard workspace (see instructions here) and use that URL as your form action. For example:

<form action="https://yourfmeserver.com/fmedatastreaming/repositoryname/createdashboard.fmw?DestDataset_HTML=C%3A%5CData%5Cresultspage.html&token=123456abcdef">
    <p>
        <label for="nom">Quel dashboard ?</label><br> 
        <select name="nom" id="nom">
            <option value="ctrl_job_dr">exemple1</option>
            <option value="ctrl_job_semaine">exemple2</option>
        </select>
    </p>
     <input type="submit" value="submit">
 </form>

A parameter named 'nom' and its selected value (dashboard name) will then be passed in the webhook URL when the user clicks submit.

The field name on the form must match the published parameter in the workspace (nom).

Reply