Mini Widgets

Button

1.5.0

Widget bestellen

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: "",
        paddingX: "", 
        paddingY: "",
        gap: "5px",
		icon: arcCustomIcon({
				name: "plus-bold",
				color: "#fff"
			}),
        iconPosition: "left",
		fontSize: "",
		fontColor: "#fff",
		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

Mit paddingX definierst du den Abstand vom Buttoninhalt zu den linken und rechten Rändern des Buttons.

 paddingX: "5px", // Pixel-Werte angeben

Mit paddingY definierst du den Abstand vom Buttoninhalt zu den oberen und unteren Rändern des Buttons.

 paddingY: "2px", // Pixel-Werte angeben

Mit gap bestimmst du den Abstand zwischen dem Icon und dem Text des Buttons.

gap: "10px", // z.B. Pixel-Werte
gap: "", // default: 5px

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: arcCustomIcon({
				name: "plus-bold",
				color: "#fff"
			}), // arcCustomIcon einsetzen, um Icon einzufügen. 
icon: "", // default: Kein Icon wird ausgegeben.

Der Parameter iconPosition bestimmt die Position des Icons im Button.

iconPosition: "left", // Icon erscheint links vom Text.
iconPosition: "right", // Icon erscheint rechts vom Text.
iconPosition: "top", // Icon erscheint oben vom Text.
iconPosition: "buttom", // Icon erscheint unten vom Text.

iconPosition: "", // default: links

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

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
                tab: "Helper", // Titel des Tabs in ""
			}]

Aktion: openFullscreen

type: "openFullscreen" öffnet Datensätze im Fullscreen. Diese Funktion wirkt sich auf jede einzelne Zelle aus.

actions: [{
				recordId: Aufgaben, // Record, der geöffnet werden soll
				type: "openFullscreen", // öffnet den Record als Fullscreen
                tab: "Allgemeines", // Dies öffnet den jeweiligen Record direkt auf dem angegebenen Tab
			}]

Aktion: closeFullscreen

Mit der Aktion closeFullscreen schießt die Ansicht im Fullscreen.

actions: [{
				recordId: Aufgaben, 
				type: "closeFullscreen", 
			}]

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}]

Aktion: openRecord

Mit der Aktion openRecord kannst du einen bestimmten Record öffnen. Auch das Öffnen einer Ninox-Page ist mit dieser Aktion möglich. Eine Ninox Page ist im Grunde eine Table mit nur einem Record.

actions: [{ 
  type:"openRecord", 
  tab: "Allgemeines", // Dies öffnet den jeweiligen Record direkt auf dem angegebenen Tab
  recordId: Nr
}]

actions: [{ 
  type:"openRecord", 
  recordId: first(select Dashboard).Nr
}]

Aktion: closeRecord

Mit der Aktion closeRecord kannst du das aktuelle Formular (Record) schließen.

actions: [{ 
  type:"closeRecord", 
  recordId: Nr 
}]

Aktion: closeAllRecords

Mit der Aktion closeAllRecords kannst du alle geöffneten Records auf einmal schließen.

actions: [{ 
  type:"closeAllRecords", 
}]

Aktion: openUrl

Mit der Aktion openUrl kannst du Websites außerhalb oder Seiten innerhalb der Ninox Cloud öffnen.

actions: [{ 
  type:"openUrl", 
  value:  "https://www.arc-rider.com/" // URL
}]

Aktion: customJS

Mit der Aktion customJs ist es möglich, "customJs" zu hinterlegen, um eigene Javascript Logiken zu implementieren.

actions: [{ 
  type:"customJS", 
  value:  ""
}]

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