Widgets

Custom Menu

1.0.4

Custom Menu

Das Custom Menu besteht aus einem Anwendungscode, der allgemeine Settings zu den Styles definiert und detaillierte Settings zu den Aktionen und Auswirkungen des Buttons.

Gesamter Anwendungscode

Hier siehst du einen beispielhaften Anwendungscode, der ein Custom Menu definiert. Mit data definierst du die Inhalte, die du dann mit der Funktion arcCustomMenu(data) ausgeben lässt.

let current := this;
let data := {
		menu: [{
				tableId: tableId(current),
				settings: {
					menuBar: {
						width: "",
						position: "",
						backgroundColor: "",
						borderColor: "",
						fontSize: "100px"
					},
					stateNormal: {
						backgroundColor: "",
						borderColor: "",
						fontColor: ""
					},
					stateActive: {
						backgroundColor: "",
						borderColor: "",
						fontColor: ""
					}
				}
			}, {
				menuItems: [{
						item: 1,
						field: "Menu",
						title: "Table",
						active: Menu = text("A"),
						icon: arcCustomIcon({
								name: "table"
							}),
						actions: [{
								recordId: Nr,
								type: "update",
								field: "A",
								value: "A"
							}]
					}, {
						item: 2,
						field: "Menu",
						title: "Kanban",
						active: Menu = text("B"),
						icon: arcCustomIcon({
								name: "kanban"
							}),
						actions: [{
								recordId: Nr,
								type: "update",
								field: "A",
								value: "B"
							}]
					}, {
						item: 5,
						field: "Menu",
						title: "GANTT",
						active: Menu = text("E"),
						icon: arcCustomIcon({
								name: "chart-bar-horizontal"
							}),
						actions: [{
								recordId: Nr,
								type: "update",
								field: "A",
								value: "E"
							}]
					}, {
						item: 3,
						field: "Menu",
						title: "KPI Bar",
						active: Menu = text("C"),
						icon: arcCustomIcon({
								name: "copy"
							}),
						actions: [{
								recordId: Nr,
								type: "update",
								field: "A",
								value: "C"
							}]
					}, {
						item: 4,
						field: "Menu",
						title: "Mini-Widgets",
						active: Menu = text("D"),
						icon: arcCustomIcon({
								name: "chats-circle"
							}),
						actions: [{
								recordId: Nr,
								type: "update",
								field: "A",
								value: "D"
							}]
					}]
			}]
	};
arcCustomMenu(data)

Allgemeine Settings

In den allgemeinen Settings nimmst du die Grundeinstellungen deines Custom Menus vor. Diese wirken sich auf alle Menüpunkte aus. Folgend werden dir die einzelnen Parameter erläutert:

tableId gibt an, in welcher Tabelle du deine Ansichten ausgeben lassen möchtest.

tableId: tableId(current), // Record, in dem du deine Ansichten ausgeben lassen möchtest.

settings definiert allgemeine Style & Layout-Werte deines Menüs. In der Kommentarspalte wird dir beschrieben, wie du die Parameter definierst und was die einzelnen Werte bewirken.

settings: {
					menuBar: {
						width: "", // Pixel-Werte o. Prozent-Werte in ""
						position: "", // left, center, right
						backgroundColor: "", // HEX-Wert in ""
						borderColor: "", // HEX-Wert in ""
						fontSize: "100px" // Pixel-Wert in ""
					},
                    stateNormal: {
						backgroundColor: "", // HEX-Wert in "" | definiert die Hintergrundfarbe deines Buttons im unangeklickten Modus.
						borderColor: "", // HEX-Wert in "" | definiert die Rahmengrundfarbe deines Buttons im unangeklickten Modus.
						fontColor: "" // HEX-Wert in "" | definiert die Schriftfarbe deines Buttons im unangeklickten Modus.
					},
					stateActive: {
						backgroundColor: "", // HEX-Wert in "" | definiert die Hintergrundfarbe deines Buttons im angeklickten Modus.
						borderColor: "", // HEX-Wert in "" | definiert die Rahmengrundfarbe deines Buttons im angeklickten Modus.
						fontColor: "" // HEX-Wert in "" | definiert die Schriftfarbe deines Buttons im angeklickten Modus.
					}
				}
			}

menuItems definiert deine einzelnen Menüpunkte inhaltlich. Im Folgenden Code siehst du einen einzelnen Menüpunkt definiert. Du kannst mehrere Menüpunkte definieren, indem du den Code kopierst und kommagetrennt hinten anfügst. (Siehe "Gesamter Anwendungscode").

menuItems: [{
						item: 1,
						field: "menuText",
						title: "Übersicht",
						activeState: if menuText = text("U") then "active" else "" end,
						iconName: "info",
						actions: [{
								recordId: Nr,
								type: "update",
								field: "B",
								value: "U"
							}]
					}

item zeigt dir nur an, welchen Menüpunkt du hier gerade bearbietest.

item: 1, // Zahlenwert. Beschrifte hier deine Menüpunkte einfach nach Anzahl.

field gibt an, welches Feld du ansprichst. Damit du bei Button-Klick eine Aktion ausführen kannst, musst du ein Ninox-Feld ansprechen. Zum Beispiel ein Auswahlfeld oder Textfeld. In diesem Beispiel wird ein Textfeld angesprochen und soll bei bestimmten Textwerten Aktionen ausführen.

field: "menuText",

title gibt den Text in deinem Button an.

title: "Übersicht",

activeState definiert, wann dein Menüpunkt aktiv sein soll. In diesem Beispiel: Wenn der Text "A" in dem Textfeld menuText steht, dann soll der Button aktiv sein.

activeState: if menuText = text("A") then "active" else "" end,

iconName definiert ein Phosphor Icon, dass in deinem Button angezeigt wird.

iconName: "", // Kein Icon wird angezeigt
iconName: "info", // Das Icon Inof wird ausgegeben.

Aktionen

actions definiert, welche Aktion ausgeführt werden soll. Hier greifen die drei Standard-Aktionen: update, popup, delete .

Aktion: update

actions: [{
				recordId: Nr,
				type: "update", // update aktualisiert/manipuliert ein Feld. 
				field: "B", // Feld Id des zu manipulierenden Feldes.
				value: "A" // Wert, der in das Feld geschrieben werden soll. In dem Beispiel: wird "A" in ein Textfeld geschrieben.
			}]

Aktion: popup

actions: [{
                recordId: Nr,
                type: "popup", // popup öffnet den Record
            }]

Aktion: delete

actions: [{
                recordId: Nr,
                type: "delete", // delete löscht den Record
            }]

Zurück

Custom KPI Bar

Zurück

Custom KPI Bar

Weiter

Custom Kanban

Weiter

Custom Kanban