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: "",
		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 "" 

icon definiert das Icon in dem Button. Welche Icons du verwenden kannst, findest du unter Icon Phosphor.

icon: "", // Kein Icon wird ausgegeben.
icon: "trash", // Textfeld in "", dass den genauen Namen des Icons angibt. 

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"
},