Page tree
Skip to end of metadata
Go to start of metadata

Mit dem Formular-Widget können Formulare zur Dateneingabe erstellt werden.

Die eingegebenen Daten werden beim Absenden als multipart/form-data an einen Endpunkt übergeben.


Beispiel: Ein Formular-Widget im YUNA-Portal


Form Parameter einbinden

Beispiel: Ein Form Parameter eingebunden in das Template

Im formTemplate können Parameter aus dem Tag <formParams> verwendet werden. Diese werden in doppelt geschweiften Klammern geschrieben.

<formTemplate>

	<div>We can use formParams in the template:
		\{\{formParams.equiNumber\}\}: {{formParams.equiNumber}}
	</div>

</formTemplate>


Beispiel: Auszug formParams tag

Im tag <name> steht der Name des Parameters, im tag <value> der Wert.

   <formParams>
                <list>
                    <name>param</name>
                    <value>KonstanterWert</value>
                </list>
                <list>
                    <name>equiNumber</name>
                    <value>XPTO</value>
                </list>
   </formParams>


Submit Button

Über einen Submit Button können die eingegebenen Daten an einen vordefinierten Endpunkt gesendet werden.

Alternativ können die Daten über eine StoredProcedure in die DataDB geschrieben werden.

Innerhalb des Submit Buttons kann nur ein Ziel, entweder <endpoint> oder <dataID> verwendet werden. Beide Parameter sind nicht zulässig.


Beispiel: Submit Button mit Übergabe an einen Endpunkt

            <submitButton>
                <endpoint>http://www.example.com</endpoint>
                <label>
                    <default>GO!</default>
                    <tkey>content.MyFormWidget.Submit</tkey>
                </label>
            </submitButton>


Beispiel: Submit Button mit Übergabe an eine StoredProcedure

            <submitButton>
                <dataID>qy_sp_insertOrUpdatePrefilter</dataID>
                <label>
                    <default>GO!</default>
                    <tkey>content.MyFormWidget.Submit</tkey>
                </label>
            </submitButton>



Beispiel für ein Formular-Widget

        <widget>
        <caption>
        <label>Simple Form - extra submit button should be thrown out</label>
        <show>true</show>
        </caption>
            <position>
                <x>0</x>
                <y>0</y>
            </position>
            <size>
                <x>7</x>
                <y>7</y>
            </size>
            <widgettype>formwidget</widgettype>

            <outputs>
                <submit>formData</submit>
            </outputs>

            <formTemplate>
<!-- In the form block we define the our form using standard html form elements
We can reference formParams using double brackets to reference the params: {{formParams.param}}
We can use translation keys: {{'dse.translationKey' | translation}} -->
<![CDATA[
<div>Here I can use an url \{\{urlParams.hallo\}\}:{{urlParams.hallo}}</div>
<div> We can use formParams in the template:
\{\{formParams.param\}\}: {{formParams.param | uppercase}}</div>
<div>We can use formParams in the template:
\{\{formParams.equiNumber\}\}: {{formParams.equiNumber}}
</div>
<div>We can use the translation filter directly in the template: \{\{'dse.PAGE_TITLE' | translate\}\} {{'dse.PAGE_TITLE' | translate}}</div>
<div>      
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" value="{{urlParams.name}}">
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_mail">
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<input type="submit" value="hello">
]]>
            </formTemplate>
            <!-- the values of the params will replace the given entries in the form CDATA -->
            <formParams>
                <list>
                    <name>param</name>
                    <value>KonstanterWert</value>
                </list>
                <list>
                    <name>equiNumber</name>
                    <value>XPTO</value>
                </list>
            </formParams>
            <submitButton>
                <endpoint>http://www.example.com</endpoint>
                <label>
                    <default>GO!</default>
                    <tkey>content.MyFormWidget.Submit</tkey>
                </label>
            </submitButton>
        </widget>

YUNAML-Parameter

Parametername

mögliche Werte

Required?

Beschreibung

Beispiel

formTemplate'<![CDATA['-Element(tick)

HTML-Template für die Eingabefelder des Formulars


(warning): Im Template können keine <form>- oder <button>-Elemente genutzt werden. Das umschließende <form>-Element und der Submit-Button werden aus der YUNAML-Definition ermittelt

<![CDATA[
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" value="{{urlParams.name}}">
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_mail">
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
]]>
formParamsYUNAML-Listenelemente (<list>-tags) mit Eigenschaften 'name' und 'value'(error)Parameter, die in der Template-Definition (<formTemplate>) referenziert werden können
<formParams>
<list>
<name>param</name>
<value>KonstanterWert</value>
</list>
</formParams>
submitButton
(tick)Definition des Bestätigen-Buttons
submitButton.endpointURL

Ziel-Endpunkt, an den die Formulardaten geschickt werden sollen

http://www.example.com
submitButton.dataIDString
DataID, die mit den Formulardaten als Parameter aufgerufen werden soll. Die Formularfelder können unter den vergebenen Namen in der DataID als Parameter verwendet werden.qy_exampleDataID
submitbutton.labelString
Label des Bestätigen-ButtonsOK
outputs.submit

Stellt nach klick auf den Submit Button Daten aus dem Formularwidget für den Outputchannel "submit" bereit.
<outputs>
   <submit>formData</submit>
</outputs>

URL Parameter

Name

Code

Beschreibung

urlParameter
{{ urlParams.name }}
Referenziert aktuell in der URL gesetzte Parameter
formParameter
{{ formParams.name }}
Referenziert Parameter aus der YUNAML-Definition (<formParams>)
inputchannel
{{ inputs.channelname }}
Referenziert Daten, die über einen Inputchannel bereitgestellt werden

Die Notation '{{ parameter }}' orientiert sich an AngularJS. Dadurch ist es möglich AngularJS-Filter einzusetzen, die einen eingegebenen  Wert weiterverarbeiten.

Beispiele:

In der Template-Definition

Im dargestellten Widget

{{ 'hallo welt!' | uppercase }} 
HALLO WELT!
{{ formParams.userId | userDisplayFilter }}
Nachname, Vorname (username)

Datasource

Über einen I/O Channel können sie Daten aus anderen Widgets in das Formular-Widget übertragen.

Dafür muss in der YUNAML Definition des Formular-Widgets ein Input definiert werden. Die gewünschten Daten müssen daraufhin mit Feldern im Formular-Widget verbunden werden.

Weitere Informationen über das Datasource-Konzept finden sie im Abschnitt Datasource


Beispiel:

Über den I/O Channel werden Zeilen aus einem Tabellen-Widget in das Formular-Widget überführt.

Input channel definieren

<widget>
    ....
    <inputs>
        <data>myrow</data>
    </inputs>
    <widgettype>formwidget</widgettype>
</widget>

Ein Textfeld befüllen (gesamte Auswahl)

<formTemplate>
     ....
     <![CDATA[

        <div>
           Type of the Machine: {{ inputs.data }} 
        </div>

     ]]>
</formTemplate>

Ein Textfeld befüllen (spezifischer Wert)

<formTemplate>
     ....
     <![CDATA[

        <div>
           Type of the Machine: {{ inputs.data[0].Type}} 
        </div>

     ]]>
</formTemplate>

In diesem Beispiel wird der Wert "Jet Engine" aus der ersten Zeile aus der Spalte "Type" dargestellt:

{{ inputs.data[0].Type }}


Um den Wert "Frankfurt" aus der vierten Zeile aus der Spalte Location zu erhalten muss die Definition folgendermaßen aussehen:

{{ inputs.data[3].Location }}


  • No labels