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 popUp",
		title: "Record öffnen",
        embedded: true,
		width: "",
		icon: arcCustomIcon({
				name: "trash-simple",
				containerSize: "40px",
				borderSize: "1px",
				borderColor: "#666",
				iconSize: "20px",
				borderRadius: "50px",
				color: "#fff",
				backgroundColor: ""
			}),
        iconPosition:"right",
        gap: "5px",
		fontSize: "",
		fontColor: "#0062AA",
		iconColor: "#0062AA",
		backgroundColor: "#0062AA33",
		borderColor: "#0062AA",
		borderRadius: "50px",
		showBadge: false,
		badgeTitle: "",
		badgeColor: "",
		badgeBackground: "",
		badgeBorderColor: "",
		badgePosition: "",
		hoverActions: {
			fontColor: "#ffffff",
			iconColor: "#ffffff",
			backgroundColor: "#0062AA",
			borderColor: "#0062AA",
			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 auf deiner Oberfläche sein. Sinn dahinter ist: Wenn du mehrere Buttons mit unterschiedlichen Settings auf deiner Seite erstellst, überschrieben 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: "",
				fieldId: "",
				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
				fieldId: "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"
},