Individuelle Dialog-Formulare

Erklärung

Elements bietet mit den Prompts die Möglichkeit für bestimmte, manuell ausgelöste Aktionen weitere Parameter per Dialog von einer Benutzerin oder einem Benutzer für die Ausführung der Aktion zu erfragen.

Diese Parameter werden dann mit in die Aktionsausführung gegeben und können dort verarbeitet werden.

Möchtest du Parameter von einer Benutzerin oder einem Benutzer abfragen, so gib an einer beliebigen Stelle im Code einen Response mit einem Prompt-Ausgabeparameter (siehe unten) zurück. In diesem Prompt wird unter anderem die HTML-Darstellung des anzuzeigenden Dialogs in einem JSON-Objekt mit den gewünschten Parametern definiert.

Elements reagiert auf den Prompt-Ausgabeparameter und zeigt einen Dialog an und sendet zum Abschluss an eine window.postMessage. Die Aktion wird daraufhin erneut aufgerufen, jedoch werden die Daten des Prompts als Eingabeparameter mit übergeben.

Mit diesem Aufruf kannst du das Prompt-Fenster schließen und es findet kein weiterer Aktionsaufruf statt:

window.parent.postMessage({message: 'entityActionPromptAbort'})

Mit den übergebenen Prompt-Daten ist es nun möglich, in der Aktionsausführung die Stelle zu überspringen, die zuvor die Daten per Ausgabeparameter angefordert hat. Dazu dient der Name des Prompt, der hier zur Identifizierung genutzt werden kann. Im weiteren Aktionsverlauf können die Parameter dann genutzt und verarbeitet werden.

So lassen sich auch beliebig viele Dialoge auf Wizard-Art dynamisch hintereinander anzeigen.

Funktions-spezifische Eingabeparameter

Folgende, funktions-spezifische Eingabeparameter werden übergeben:

Key	Datentyp	Value
Prompt	Dictionary<string,object>	enthält die Daten eines HTML-Dialogs, der weitere Parameter anhand der Eingabe des Benutzers abgeholt hat
PreviousPrompts	Dictionary<string, object>[]	Enthält die Daten von vorherigen HTML-Dialogen dieser Aktion

Diese Inhalte sind jeweils im Dictionary enthalten:

Key	Datentyp	Value
Name	string	der Name des Prompts
Data	Dictionary<string, object>	die Daten des HTML-Dialogs

Funktions-spezifische Ausgabeparameter

Nachfolgende, funktions-spezifische Ausgabeparameter werden in Elements verarbeitet:

Key	Datentyp	Value
Prompt	Dictionary<string,object>	enthält die Daten für einen HTML-Dialog, der angezeigt werden soll, um weitere Parameter abzufragen

Diese Inhalte werden im Dictionary erwartet:

Key	Datentyp	Value
Html	string	der HTML-Code, der im iFrame angezeigt wird
Name	string	der Name des Prompts

Beispiele

Einfaches Formular

using System.Collections.Generic;
 
namespace Custom.TestAssembly
{
    public class ExampleAction
    {
        public Dictionary<string,object> Execute(Dictionary<string, object> parameter)
        {
            var client = parameter.TryGetValue("Client", out var clientObj) ? clientObj as Mandant : null;
            var documentId = parameter.TryGetValue("DocumentId", out var documentIdObj) && int.TryParse(documentIdObj?.ToString(), out var documentIdParsed) ? documentIdParsed : (int?)null;
            var cultureId = parameter.TryGetValue("CultureId", out var cultureIdObj) && cultureIdObj != null ? cultureIdObj?.ToString() : "de-DE (Fallback)";
            var erpUser = parameter.TryGetValue("ErpUser", out var erpUserObj) ? erpUserObj as string : null;
            var locationKey = parameter.TryGetValue("LocationKey", out var locationKeyObj) ? locationKeyObj as string : null;
                        
            var result = new Dictionary<string, object>();
            result.Add("Message", new string[] {
                $"Standort: {locationKey}",
                $"Lokalisierung: {cultureId}",
                $"ERP-Benutzer: {erpUser}"
            });
            result.Add("MessageType", "Information");
            result.Add("PrintDocumentId", documentId);
 
            return result;
        }
    }
}

Prompt-Aktionen mit einem Prompt

using System.Collections.Generic;
using System.Linq;
 
namespace Custom.TestAssembly.HtmlPromptAction
{
    internal class Example
    {
        private const string PreviousPrompts = "PreviousPrompts";
 
        public Dictionary<string, object> Execute(Dictionary<string, object> parameter)
        {
 
            if (!parameter.ContainsKey(PreviousPrompts)
                || (parameter[PreviousPrompts] is List<Dictionary<string, object>> previousPrompts
                && (previousPrompts == null ||
                !previousPrompts.Any(prompt => prompt["Name"].ToString() == "HtmlPromptAction"))))
            {
 
                return new Dictionary<string, object>
                {
                    {
                        "Prompt", new Dictionary<string, object>()
                        {
                            {"Name", "HtmlPromptAction"},
                            {"Html", @"<!DOCTYPE html>
    <html>
      <head>
        <link rel='stylesheet' href='https://edev.4sellers.de/api/asset/64331/style.css' />
      </head>
      <body>
        <script>
            function onClickHandler() {
                var firstName = document.getElementById('fname').value;
                var lastName = document.getElementById('lname').value;
 
                window.parent.postMessage({message: 'entityActionPromptData', value: { fname: firstName, lname: lastName } }, '*');
            }
 
            function abort() {
                window.parent.postMessage({
                    message: 'entityActionPromptAbort'
                });
            }       
        </script>
          <h2>HTML Forms</h2>
          <form>
            <div class='form-group'>
              <label for='fname'>First name:</label><br>
              <input class='form-control' type='text' id='fname' name='fname' value='John'><br>
            </div>
            <div class='form-group'>
              <label for='lname'>Last name:</label><br>
              <input class='form-control' type='text' id='lname' name='lname' value='Doe'><br><br>
            </div>
              <button class='btn btn-primary' onclick='onClickHandler()'>Submit</button>
              <button class='btn btn-primary' onclick='abort()'>Abort</button>
          </form>
      </body>
    </html>"
                            }
                        }
                    }
                };
            }
 
            var promptData = (Dictionary<string, object>) parameter["Prompt"];
            var message = new List<string>();
            if(promptData != null)
            {
                message.Add("Hello World");
                message.Add($"Name: {promptData["Name"]}");
 
                var data = (Dictionary<string, object>) promptData["Data"];
 
                if(data != null)
                {
                    foreach(var kvp in data)
                    {
                        message.Add($"{kvp.Key}: {kvp.Value}");
                    }
                }
            }
 
 
            return new Dictionary<string, object>
                {
                    { "Message", message.ToArray() },
                    { "MessageType", "Information" },
                };
        }
    }
}

Prompt-Aktionen mit mehr als einem Prompt

using Custom.TestAssembly.Extensions;
using System.Collections.Generic;
using System.Linq;
 
namespace Custom.TestAssembly.HtmlPromptAction
{
    internal class Example
    {
        private const string PreviousPrompts = "PreviousPrompts";
 
        public Dictionary<string, object> Execute(Dictionary<string, object> parameter)
        {
 
            if (!parameter.ContainsKey(PreviousPrompts)
                || (parameter[PreviousPrompts] is List<Dictionary<string, object>> previousPrompts
                && (previousPrompts == null ||
                !previousPrompts.Any(prompt => prompt["Name"].ToString() == "HtmlPromptAction"))))
            {
 
                return new Dictionary<string, object>
                {
                    {
                        "Prompt", new Dictionary<string, object>()
                        {
                            {"Name", "HtmlPromptAction"},
                            {"Html", @"<!DOCTYPE html>
    <html>
      <head>
        <link rel='stylesheet' href='https://edev.4sellers.de/api/asset/64331/style.css' />
      </head>
      <body>
        <script>
          function onClickHandler() {
            var firstName = document.getElementById('fname').value;
            var lastName = document.getElementById('lname').value;
 
            window.parent.postMessage({message: 'entityActionPromptData', value: { fname: firstName, lname: lastName } }, '*');
          }
 
            function abort() {
                window.parent.postMessage({
                    message: 'entityActionPromptAbort'
                });
            }
        </script>
          <h2>HTML Forms</h2>
          <form>
            <div class='form-group'>
              <label for='fname'>First name:</label><br>
              <input class='form-control' type='text' id='fname' name='fname' value='John'><br>
            </div>
            <div class='form-group'>
              <label for='lname'>Last name:</label><br>
              <input class='form-control' type='text' id='lname' name='lname' value='Doe'><br><br>
            </div>
              <button class='btn btn-primary' onclick='onClickHandler()'>Submit</button>
              <button class='btn btn-primary' onclick='abort()'>Abort</button>           
          </form>
      </body>
    </html>"
                            }
                        }
                    }
                };
            }
 
            if (!parameter.ContainsKey(PreviousPrompts)
                || (parameter[PreviousPrompts] is Dictionary<string, object>[] previousPrompts1
                && (previousPrompts1 == null ||
                !previousPrompts1.Any(prompt => prompt["Name"].ToString() == "HtmlPromptAction-Mail"))))
            {
 
                return new Dictionary<string, object>
                {
                    {
                        "Prompt", new Dictionary<string, object>()
                        {
                            {"Name", "HtmlPromptAction-Mail"},
                            {"Html", @"<!DOCTYPE html>
    <html>
      <head>
        <link rel='stylesheet' href='https://edev.4sellers.de/api/asset/64331/style.css' />
      </head>
      <body>
        <script>
            function onClickHandler() {
                var birthdate = document.getElementById('birthdate').value;
                var mail = document.getElementById('mail').value;
 
                window.parent.postMessage({message: 'entityActionPromptData', value: { 'birthdate': birthdate, 'mail': mail } }, '*');
            }
 
            function abort() {
                window.parent.postMessage({
                    message: 'entityActionPromptAbort'
                });
            }             
        </script>
          <h2>HTML Forms</h2>
          <form>
            <div class='form-group'>
              <label for='birthdate'>Birthdate</label><br>
              <input type='date' id='birthdate' name='birthdate' value='01011994'><br>
            </div>
 
            <div class='form-group'>
              <label for='mail'>Mail</label><br>
              <input type='text' id='mail' name='mail' value='random@mail.address'><br><br>
            </div>
              <button class='btn btn-primary' onclick='onClickHandler()'>Submit</button>
              <button class='btn btn-primary' onclick='abort()'>Abort</button>            
           </form>
      </body>
    </html>"
                            }
                        }
                    }
                };
            }
 
            var prompts = (Dictionary<string, object>[]) parameter["PreviousPrompts"];
            var message = new List<string>();
            if (prompts != null)
            {
                message.Add("Hello World");
 
                foreach (var prompt in prompts)
                {
                    message.Add($"Name: {prompt["Name"]}");
 
                    var data = (Dictionary<string, object>)prompt["Data"];
 
                    if (data != null)
                    {
                        foreach (var kvp in data)
                        {
                            message.Add($"{kvp.Key}: {kvp.Value}");
                        }
                    }
                }
            }
 
 
            return new Dictionary<string, object>
                {
                    { "Message", message.ToArray() },
                    { "MessageType", "Information" },
                }.ProcessDevTags(parameter);
        }
    }
}

zurück

nach oben

weiter

Elements Produkttour - Jeden Dienstag um 14:00 stellen wir Ihnen Elements live vor!