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

Neben den typischen Eigenschaften wie Größe, Position oder Titel können sie im HTML-Widget HTML Code, CSS und JavaScript verwenden.

Der HTML Code wird in das Tag <template> geschrieben.


Beispiel: Darstellung eines HTML Widgets im YUNA Portal


Beispiel: Auszug Inhalt des tags <h1>

<template>

	<![CDATA[
		<h1>Headline 1</h1>
	]]>

</template>


Im Template können Parameter aus dem Tag <htmlParams> verwendet werden. Diese werden in geschweiften Klammern geschrieben. Die HTML-Parameter können frei definierbarer Text, HTML, CSS oder JavaScript Code sein.

Sobald eine Data_ID angegeben wird, dient ein HTML-Parameter als Verweis auf eine Spalte in der Datenbank-Tabelle, deren Wert übernommen wird.


Beispiel: Auszug HTML Parameter

      <htmlParams>
        <list>
          <!-- Name is used to bind the value to the template -->
          <name>label</name>
          <!-- Value of the param -->
          <value>Equipment-Number</value>
        </list>
      </htmlParams>

Beispiel: Die HTML Parameter eingebunden in das tag <h2> im Template

      <template>
        <!-- Accepts HTML. Dynamic values are set with {} (Values could be htmlParams or columns from the dataID) -->
        <![CDATA[<h2>{label} {EquipmentNo}</h2>]]>
      </template>
Ein DATETIME wird erkannt und seine Formatierung über format festgelegt. Unbekannte Parameter bleiben als solche erhalten, NULL-Werte werden durch Leerstrings ersetzt.

Unabhängig von den Html-Parametern können mit der Präfix 'urlParam.' Url-Parameter ausgelesen werden. Ist in der aktuellen Url beispielsweise ein Parameter 'id' gesetzt (?id=1) kann dieser im Template mit {urlParam.id} ausgelesen werden.


Skriptmodus

Über options.skriptModus kann der Skriptmodus aktiviert werden. Parameter werden in doppelt geschweiften Klammern geschrieben.

	<options>
		<scriptMode>true</scriptMode>
	</options>


Übersetzung von Inhalten

Mit Hilfe des Tags <TKEY> können Inhalte im HTML Widget übersetzt werden.  Da bei der Übersetzung der komplette Inhalt des Eltern-Tags ersetzt wird, sollte um die Elemente <TKEY> und <DEFAULT> ein eigenes HTML-Tag gelegt werden.

<span>
   <TKEY>übersetzung.schlüssel</TKEY>
   <DEFAULT>Standardwert</DEFAULT>
<span>


image2019-6-12_14-38-1.pngBeispiel für ein HTML-Widget

XML
<xml>
  <widget name="template_widget_HTML">
    <!-- Position from left top  -->
    <position>
		<x>0</x>
		<y>0</y>
    </position>
    <!-- Size of the Widget -->
    <size>
      <x>8</x>
      <y>2</y>
    </size>
    <!-- Caption: title over the widget and additional features (Contextmenue) -->
    <caption>
        <!-- Display caption -->
      <show>true</show>
        <!-- Title of the Widget -->
      <label>HTML-Widget-Template</label>
    </caption>
    <!-- Name of the WidgetType -->
    <widgettype>htmlwidget</widgettype>
    <!-- Query to execute -->
    <dataID>qy_NameOfDataID</dataID>
    <!-- Widget specific settings -->
    <htmlwidget>
      <!-- Template to dispay -->
      <template>
        <!-- Accepts HTML. Dynamic values are set with {} (Values could be htmlParams or columns from the dataID) -->
        <![CDATA[<h2>{label} {EquipmentNo}</h2>]]>
      </template>
      <!-- Array of HTML-Params -->
      <htmlParams>
        <list>
          <!-- Name is used to be bind the value to the template -->
          <name>label</name>
          <!-- Value of the param -->
          <value>Equipment-Number</value>
        </list>
      </htmlParams>
	<options>
		<scriptMode>true</scriptMode>
	</options>
    </htmlwidget>   
  </widget>
</xml>
JSON
{
    "position": {
        "position": [0, 0]
    },
    "size": {
        "x": 14,
        "y": 7
    },
    "caption": {
        "show": true,
        "label": "HTML-Widget-Template"
    },
    "widgetname": "htmlwidget",
    "dataID": "qy_NameOfDataID",
    "triggerParams": [],
    "htmlwidget": {
        "template": {
            "<![CDATA[<h2>{label} {EquipmentNo}</h2>]]>"
        },
        "htmlParams": [
            {
                "name": "label",
                "value": "Equipment-Number"
            }
        ]
    }
}


Feld

Mögliche Werte

default

Beschreibung

widgettypehtmlwidget
Gibt den Widget-Typen an.
dataIDdataID aus der Datenbank
Gibt die Datenherkunft an.
triggerParamstriggerParameter aus der URLoptionalWie bei anderen Widgets
htmlwidgetObjekt
Definiert die Eigenschaften des HTML-Widgets
templateObjekt
Das im Widget darzustellende HTML-Template.
htmlParamsObjekt
Auflistung der Parameter, die im Template dargestellt werden, sofern sie nicht automatisch durch die dataID gesetzt werden.
htmlParams.nameString
Name des Parameters.
htmlParams.valueString oder ZahloptionalWert der anstelle des Parameters im Template gesetzt wird.
htmlParams.formatDatumsformatoptionalsiehe genDate. Weiterhin sind auch freie Formate möglich, z.B. "dd.MM.yyyy".
optionsObjekt
Optionen für das Widget.
options.caseSensitivetrue | falsefalseBei den Parametern wird auf Groß- und Kleinschreibung geachtet bzw. ignoriert.
options.skriptModustrue | falsefalse

Steuert die Verwendung des Skriptmodus. Im SkriptModus erfolgt die Paramemterersetzung anhand anderer Platzhalter (siehe URL-Parameter), sodass auch in <script>-Tags geschweifte Klammern genutzt werden können.

Besonderheiten für Links im html-Widget

Wird im Template eine href-Adresse definiert, kann mit dem Parameter #tabExchange beim Öffnen eines Links in einem neuen Tab der Filter des aktuellen Tabs übergeben werden.

z.B. href='http://localhost:8080/conditionmonitoring/#/cmp_Messages?equi={equipmentNo}&{#tabExchange}'

Verwendung von jQuery

Von der Verwendung von jQuery wird im allgemeinen abgeraten, da dies zu Fehlern in der Anwendung führen kann

Es ist möglich im HTML-Widget die JavaScript-Bibliothek jQuery zu nutzen. Diese steht unter dem Namen 'jQuery' zur Verfügung. Die Verwendung von '$' statt 'jQuery' kann zu Fehlern führen und wird nicht empfohlen.

  • No labels