GIP
Suche K

Appearance

Standalone

0_19 pre0_18 pre0_17 pre0_16 pre0_15 pre0_14 pre

Formelfelder in Ninox skalieren leider nicht immer automatisch mit dem Inhalt, sodass Module abgeschnitten dargestellt werden können. Daher haben wir unser Standalone-Modul entwickelt, das die Größe des Formelfeldes anpasst, und haben es direkt in unsere anderen Module integriert. Es versteckt sich hinter dem Embedded-Key und du erhältst es immer automatisch mit dem globalen Code.

Wenn du unsere Module nutzt, musst du also nicht separat das Standalone-Modul aufrufen, um Formelfelder zu skalieren. Wir stellen dir trotzdem einen Modulcode zur Verfügung, denn es funktioniert auch mit anderen HTML-Elementen.

Standalone innerhalb von GIP-Modulen nutzen ​

In unseren Modulen nutzt du den Embedded-Key, um der Standalone-Funktion mitzuteilen, anhand welches Moduls das Ninox-Formelfeld skaliert werden soll. Da du unsere Module ineinander verschachteln kannst, brauchen wir von dir diesen Input, um zu wissen, welches Modul das äußerste ist. Die Logik hinter den Eingebewerten für den Embedded-Key ist wie folgt:

  • embedded = true: Das Modul ist in einem anderen Modul eingebettet. Das Formelfeld wird nicht an dieses Modul angepasst.
  • embedded = false: Das Modul ist das äußerste Modul und nicht in einem anderen Modul eingebettet. Hieran wird das Formelfeld skaliert.
  • embedded = {}: Derselbe Effekt wie embedded = false. Das Modul ist das äußerste Modul und nicht in einem anderen Modul eingebettet. Im Gegensatz zu false können in dem Object aber weitere Einstellungen übergeben werden.

Als Beispiel sehen wir uns zwei ineinander verschachtelte Layouts an. Wir möchten in diesem Fall, dass sich die Größe des Formelfeldes an das äußere Layout anpasst. Daher können wir "OuterLayout" entweder embedded: false oder ein Object übergeben. Dagegen ist "InnerLayout" tatsächlich eingebettet und erhält embedded: true.

Beispiel: Zwei Layouts ineinander

json
GIP_layout({
	uniqueId: "OuterLayout",
    embedded: {
		height: "200px",
		styleHtml: "padding: 10px;",
		styleStri: "border: 1px solid red;"
	},
	blocks: [{
		value: GIP_layout({
	        uniqueId: "InnerLayout",
            embedded: true,
	        blocks: [{
                value: "",
            }],
        }),
	}],
})

Das Beispiel zeigt, wie du mit einem Object im Embedded-Key erweiterte Styling-Möglichkeiten für das Formelfeld selbst nutzen kannst. Dadurch passt sich das Formelfeld nicht nur an die Größe des Moduls an, sondern du kannst z.B. auch den Rahmen des Formelfeldes stylen.

Ninox-Formelfelder bestehen aus einer verschachtelten Struktur von fünf Ebenen:

  1. Component – Die äußerste Ebene, die das gesamte Formelfeld-Element darstellt. Hierin liegt alles, vom Label bis hin zum Inhalt des Formelfeldes.
  2. Label – Das Label, das den Namen des Formelfeldes anzeigt. Dieses Label kannst du über die normalen Ninox-Feldeigenschaften bearbeiten.
  3. Fn-Editor – Der Editor-Container ist eine erste Zwischenebene.
  4. Stringeditor – Der String-Editor ist eine zweite Zwischenebene. Diese Ebene bestimmt z.B. das Aussehen von Hintergrund und Rahmen des Formelfeldes selbst.
  5. HTML-Element – Das HTML-Element enthält den tatsächlichen Code, den du im Ninox-Formeleditor eingegeben hast, z.B. html( raw(GIP_master({})) + raw(GIP_layout({})) ). Außerdem bestimmt diese Ebene das Padding zwischen Formelfeld-Rahmen und -Inhalt.
Componentcomponent editor editor-htmlLabellabelFn-Editorfn-editorStringeditorstringeditorHTML-Elementhtml text-selectableEnthält den Ninox-Code im Formelfeld

Im Embedded-Object stellen wir dir verschiedene Keys, wie styleHtml und styleStri, für ein individuelles Styling zur Verfügung. Außerdem kannst du den Presets-Key zum Übergeben besonderer, voreingestellter Stylings nutzen:

  • paddingless: Entfernt Paddings des Ninox-Formelfeldes.
  • borderless: Entfernt Paddings sowie den Titel des Ninox-Formelfeldes und skaliert es auf 100% der Seitenhöhe.
  • fullscreen: Entfernt die Ninox-Kopfleiste des Records (enthält Tabs, Schließen-Button, Anhänge, Kommentare und Änderungsverlauf). Für eine vollständige Vollbild-Ansicht muss der Record entweder mit der Ninox Funktion "openFullscreen()" oder dem GIP-Action-Type "openFullscreen" geöffnet werden.

Du kannst auch mehrere Presets kombinieren, indem du sie mit Leerzeichen aneinanderreihst, z.B. presets: "borderless fullscreen".

Achtung

Nachdem du die Presets in einem Modul geändert hast, musst du die Ansicht in Ninox neu laden, damit die Änderungen aktiv werden. Den Ninox-Tab zu wechseln reicht.

Standalone mit anderen HTML-Elementen ​

Wenn du das Standalone-Modul direkt zur Skalierung von Formelfeldern nutzen möchtest, kommt zusätzlich zum Embedded-Key noch ein ChildId-Key hinzu. Die ChildId nutzt das Standalone-Modul, um das Formelfeld zu identifizieren, das skaliert werden soll. Es muss also in dem zu skalierenden Formelfeld zwingend ein Element mit einer ID vorhanden sein.

Wenn du also eigene HTML-Elemente in einem Formelfeld erstellt hast, gibst du die ID des äußersten Elementes an (im Beispiel "myDiv"). Beachte außerdem, dass deine HTML-Struktur eine definierte Höhe haben muss, an die das Formelfeld angepasst werden kann.

Beispiel: Eigene HTML-Elemente

js
html(raw(GIP_standalone({
		childId: "myDiv",
		embedded: false
	})) +
"<div id='myDiv' style='font-size: 18px; line-height: 23px; overflow: hidden;'>
    <p>Jeder Programmierer kennt den Satz:</p>
    <p style='font-size: 40px; line-height: 50px; color: red; text-align: center;'>Hallo Welt!</p>
    <p>Wer ihn noch nicht kannte, kennt ihn jetzt.</p>
</div>")

Modulcode ​

json
GIP_standalone({
   childId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   	presets: "",
   },
})
json
html( raw(GIP_master({})) + 
raw(GIP_standalone({
   childId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   	presets: "",
   },
})
))

Key-Table ​