Mini Widgets

Button

1.5.0

Buttons

Der Button besteht aus einem Anwendungscode, den du in einem Ninox Formel-Feld auf deiner Wunschoberfläche oder in einem anderen Widget in der Datenbank einfügst.

Gesamter Anwendungscode

Folgend siehst du einen beispielhaften Anwendungscode für einen Button:

arcCustomButton({
		uniqueId: "Button " + Nr,
		title: "Neuen Eintrag erstellen",
		width: "",
        height: "",
        alignY: "",  
        alignX: "",
		icon: arcCustomIcon({
				name: "plus-bold",
				color: "#fff"
			}),
		fontSize: "",
		fontColor: "#fff",
		iconColor: "#0062AA",
		backgroundColor: "#0062AA",
		borderColor: "#0062AA",
		borderRadius: "5px",
		showBadge: false,
		badgeTitle: "",
		badgeColor: "",
		badgeBackground: "",
		badgeBorderColor: "",
		badgePosition: "",
		hoverActions: {
			fontColor: "",
			iconColor: "",
			backgroundColor: "",
			borderColor: "",
			animation: "0.25s"
		},
		actions: [{
				type: "create",
				tableId: "",
				popup: true,
				changeFieldValues: [{
						fieldId: "",
						value: ""
					}, {
						fieldId: "",
						value: ""
					}]
			}]
	})

Erklärung einzelner Parameter

Folgend wird dir aufgeschlüsselt, welche Parameter du verwenden kannst und was du jeweils eintragen musst.

uniqueId vergibst du individuell und sollte einzigartig sein. Sinn dahinter ist: Wenn du mehrere Buttons mit unterschiedlichen Settings auf deiner Oberfläche erstellst, überschreiben sich die Styles nicht.

uniqueId: Nr, // Ninox-Feld 
uniqueId: "Button 1", // Text in ""

title gibt den Text in deinem Button wieder.

title: "",

width gibt die Breite deines Buttons an.

width: "100%",// Prozent-Werte in "" 
width: "100px",// Pixel-Werte in ""

Mit height bestimmst du die Höhe des Buttons.

height: "100%", // Prozent-Werte in "" 
height: "100px", // Pixel-Werte in "" 
height: "", // default: auto

alignY: gibt an, wie deine Inhalte auf der Y-Achse angeordnet werden.

alignY: "center", // zentriert // default: center
alignY: "top", // oben angeordnet
alignY: "bottom", // unten angeordnet
alignY: "between", // teilt Blocks auf Gesamthöhe auf

alignX: gibt an, wie deine Inhalte auf der X-Achse angeordnet werden.

alignX: "center", // zentriert // default: center
alignX: "left", // linksbündig
alignX: "right", // rechtsbündig
alignX: "between", // teilt Blocks auf Gesamtbreite auf

Bei dem Parameter icon setzt du das arcCustomIcon ein, um zu bestimmen, welchen Icon in dem Button angezeigt werden soll. Welche Icons du verwenden kannst, findest du unter Icon Phosphor.

icon: "", // Kein Icon wird ausgegeben.
icon: arcCustomIcon({
				name: "plus-bold",
				color: "#fff"
			}), // arcCustomIcon einsetzen, um Icon einzufügen.

fontSize gibt die Schriftgröße deines Textes in dem Button an.

fontSize: "18px",// Pixel-Werte in ""

fontColor gibt die Schriftfarbe an.

fontColor: "#ffffff", // HEX-Wert in ""

iconColor gibt die Farbe deines Icons an.

iconColor: "#ffffff", // HEX-Wert in ""

backgroundColor gibt die Hintergrundfarbe deines Buttons an.

backgroundColor: "#4970ff", // HEX-Wert in ""

borderColor bestimmt die Farbe deiner Button-Umrandung.

 borderColor: "#EEEEEE", // HEX-Wert in ""

borderRadius bestimmt die Rundung deines Buttons.

 borderRadius: "50px", // 50px = ganz abgerundet // default Wert sind: 3px

embedded benutzt du, wenn du den Button nicht innerhalb eines anderen Widgets einsetzt. Standardmäßig ist dies aber auf true gesetzt.

embedded: false, // ermöglicht den Standalone Einsatz des Widgets (nicht eingebettet in anderen Widgets)
embedded: true,  // Fallback

Aktionen

Du kannst auf deinem Button drei verschiedene Aktionen ausführen: popup, delete und update. Die Grundschreibweise einer Aktion wird wie folgt geschrieben:

actions: [{
				recordId: Nr,
				type: "",
				field: "",
				value: ""
			}]

Aktion: update

Mit der Aktion update aktualisierst /manipulierst du Felder in deiner Datenbank.

actions: [{
				recordId: Nr,
				type: "update", // Titel der Aktion in "", also update
				field: "D", // Field ID des Feldes, dass geupdated werden soll
				value: "5" // Wert, der reingeschrieben werden soll
			}]

Aktion: delete

Mit der Aktion delete löschst du Datensätze aus deiner Datenbank.

actions: [{
				recordId: Nr,
				type: "delete", // Titel der Aktion in "", also delete
			}]

Aktion: popup

Mit der Aktion popup öffnest du Datensätze aus deiner Datenbank.

actions: [{
				recordId: Mitarbeiter.Arbeitszeiten, // Record, der geöffnet werden soll
				type: "popup", // Titel der Aktion in "", also popup
			}]

Aktion: create

Mit der Aktion create kannst du neue Datensätze erstellen.

actions: [{
	type: "create",
	tableId: if menuText = "A" then
    			"CC"
    		else
				if menuText = "C" then
					"FB"
				else
					if menuText = "D" then "LB" end
				end
			end,
	popup: true}]

Hover Aktions (NEU)

Mit hoverActions bestimmt ihr die Farbe des Buttons, wenn die Maus darüber schwebt - und das sogar mit cooler Animation (stellt die Dauer der Animation der Farbwechsel ein).

hoverActions: {
	fontColor: "#ffffff",
	iconColor: "#ffffff",
	backgroundColor: "#0062AA",
	borderColor: "#0062AA",
	animation: "0.8s"
},

Zurück

Checkbox

Zurück

Checkbox

Weiter

Input

Weiter

Input