Select (Dropdown)

Mit dem Select Mini-Widget kannst du deine Datenbank um schicke und funktionale Dropdowns erweitern. Diese können auch in anderen Widgets, wie die Custom Table, eingesetzt werden. Außerdem kannst du andere Mini-Widgets in das customSelect einbinden um dein Select noch funktionaler und optisch ansprechender zu gestalten.

Gesamter Anwendungscode

arcCustomSelect({
	uniqueId: "Projekt Status" + Nr,
	recordId: Nr,
	field: "",
	embedded: false,
	width: "",
	height: "",
    alignX: "",
	fontColor: "",
	backgroundColor: "",
	borderColor: "",
	borderWidth: "",
    borderRadius: "",
    itemsSettings: {
			width: "",
			height: "",
			borderRadius: ""
		},
	labelSettings: {
    		title: "",
    		fontSize: "",
    		alignX: "",
    		height: ""
	},
	clickPosition: "icon",
	placeholder: "select",
    disabled: false,
	reset: {
			title: "reset",
			value: "",
			hide: true
		},
	currentValue: text(Status),
	items: let id := Nr;
		(select Status_Projekte).[{
			title: Titel,
			active: number(id.Status) = number(Nr),
			value: number(Nr)
			}]
})

Einzelne Parameter

uniqueId

Die uniqueId vergibst du individuell, sie muss einzigartig sein. Sinn dahinter ist: Wenn du mehrere customText mit unterschiedlichen Settings auf deiner Oberfläche anzeigst, überschreiben sich die Styles nicht.

uniqueId: Nr, // Ninox-Feld 
uniqueId: "Aufgabe Beschreibung", // Text in "" 

recordId

Die recordId vergibst du individuell, sie muss einzigartig sein! Sinn dahinter ist: Wenn du mehrere customText mit unterschiedlichen Settings auf deiner Oberfläche anzeigst, überschreiben sich die Styles nicht.

recordId: Nr, // Ninox-Tabellen Id 

field

Bei field trägst du die Field Id des Ninox-Feldes ein, welches mit der Select-Auswahl beschrieben werden soll. Die Field Id kannst du mit dem Mini Widget Field Finder herausfinden.

field: "B1", 
field: "", // gibst du keine Id an, funktioniert das Select nicht

embedded

Den Parameter embedded nutzt du, wenn du das customSelect nicht innerhalb eines anderen Widgets liegt. Standardmäßig ist dies aber auf true gesetzt.

embedded: false, // ermöglicht den Standalone Einsatz des Widgets (nicht eingebettet in anderen Widgets)
embedded: true, // wenn Text eingebettet in anderes Widget 
embedded: "", // default: true

width

Bei with definierst du die Breite deines Selects.

width: "100%", // Prozent-Werte oder "80px" Pixel-Werte
width: "auto", // width passt sich an Inhalt an
width: "", // default: 100%

height

Bei height definierst du die Höhe deines Selects.

height: "100%", // Prozent-Werte oder "80px" Pixel-Werte
height: "auto", // height passt sich automatisch an Inhalt an
height: "", // default: auto

alignX

Mit dem Parameter alignX bestimmst du, wie der Text, bei geschlossenem select, auf der X-Achse angeordnet werden soll. (seit v1.7.0)

alignX: "left", // linksbündig
alignX: "center", // zentriert
alignX: "right", // rechtsbündig
alignX: "", // default:  left

itemsWidth

Bei itemsWith definierst du die Breite des ausgeklappten Select Bereiches. Also das Fenster, welches sich ausklappt und die auswählbaren Items anzeigt. (seit v1.4.0)

!! Vorerst bleibt der bisherige Einstellungs-Parameter itemsWidth: "200px"noch aktiv, nutzt aber bitte in Zukunft für diese Einstellungen den Parameter width: "200px" im itemsSettings Block ab v 1.7.0.

itemsWith: "100%", // Prozent-Werte oder "80px" Pixel-Werte
itemsWith: "auto", // width passt sich an Inhalt an
itemsWith: "", // default: 100%

itemsHeight

Bei itemsHeight definierst du die Höhe des ausgeklappten Select Bereiches. Also das Fenster, welches sich ausklappt und die auswählbaren Items anzeigt. (seit v1.4.0)(wird abgelöst durch itemsSettings in v1.7.0, ist aber zunächst noch nutzbar, damit eure vorhandenen Ansichten nicht crashen)

!! Vorerst bleibt der bisherige Einstellungs-Parameter itemsHeight: "200px"noch aktiv, nutzt aber bitte in Zukunft für diese Einstellungen den Parameter height: "200px" im itemsSettings Block ab v 1.7.0.

itemsHeight: "100%", // Prozent-Werte oder "80px" Pixel-Werte
itemsHeight: "auto", // height passt sich an
itemsHeight: "", // default: auto

fontColor

fontColor bestimmt die Farbe des Select-Button-Textes. (seit v1.5.0)

fontColor: "#EEEEEE", // z.B. HEX-Wert in ""
fontColor: "", // default: #000

backgroundColor

Mit backgroundColor gibst die Hintergrundfarbe des select Feldes an. (seit v1.5.0)

backgroundColor: "#4970ff", // z.B. HEX-Wert in ""
backgroundColor: "", // default: #FFFFFF

borderColor

borderColor bestimmt die Farbe der Select-Button-Umrandung. (seit v1.5.0)

borderColor: "#EEEEEE", // z.B. HEX-Wert in ""
borderColor: "", // default: #e5e5e5

borderWidth

Mit borderWidth bestimmst du, wie breit die Select-Button-Umrandung sein soll. (seit v1.6.0)

borderWidth: "#EEEEEE", // z.B. HEX-Wert in ""
borderWidth: "", // default: 1px

borderRadius

Mit borderRadius bestimmst du, wie abgerundet die Ecken des select Buttons sein sollen.

borderRadius: "20px", // z.B. Wert in px
borderRadius: "", // default: 3px

itemsSettings Block

Bei dem itemsSettings Block werden alle Einstellungen des aufgeklappten dropdown Elements definiert. Hier kannst du width, height und border radius bestimmen. (seit v1.7.0)

!! Vorerst bleiben die bisherigen Einstellungs-Parameter itemsWidth: "20px", und itemsHeight: "100px", noch aktiv, nutzt aber bitte in Zukunft für diese Einstellungen diesen itemsSettings Block.

itemsSettings: {
			width: "", // default: 100%
			height: "", // default: 200px
			borderRadius: "" // default:  5px
		},

Einzelerklärungen:
  
  width: "40px", // Wert in px oder aber auch z.B. "auto"
  width: "", // default: 100%

  height: "200px", // Wert in px oder aber auch z.B. "auto" (passt sich Inhalt an)
  height: "", // default: 200px

  borderRadius: "30px", // Wert in px oder aber auch z.B. "auto" (passt sich Inhalt an)
  borderRadius: "" // default:  3px

labelSettings Block

Mit dem labelSettings Block kannst du Einstellungen für das Label vornehmen. Du kannst den Titel und die Schriftfarbe des Labels bestimmen, sowie die Höhe des Label containers und ob das Label links oder rechtsbündig angezeigt werden soll. (seit v1.5.0)

labelSettings: {
		title: "", 
		fontSize: "",
		alignX: "",
		height: ""
	}

Einzelerklärungen:
  
  title: "Status", // Wort, in "" welches als Label ausgegeben werden soll
  title: "", // kein Label wird angezeigt

  fontSize: "30px", // z.B. Pixel Werte
  fontSize: "", // default: 11px

  alignX: "right", // Label ist rechtsbündig
  alignX: "left", // Label ist linksbündig
  alignX: "", // default: left

  height: "40px", // z.B. Pixel Werte
  height: "", // default: 15px

clickPosition

Mit clickPosition kannst du mit "icon" den Klick auf das icon beschränken. Das kann hilfreich sein, wenn man in den currentValue beispielsweise einen Button einbauen möchte. (seit v1.5.0)

clickPosition: "icon", // nur auf icon klickbar (select klappt sich aus)
clickPosition: "", // default: klick auf gesamtem select möglich

placeholder

Mit dem Parameter placeholder bestimmst du, was bei einem leeren select angezeigt werden soll.

placeholder: "select", // eigener Platzhalter
placeholder: "", // default: "Auswählen"

disabled

Mit dem Parameter disabled kannst du bestimmen, ob das select anklickbar ist oder nicht. (z.B.: wenn du die Auswahl an Bedingungen knüpfen möchtest)

disabled: true, // das select kann nich angeklickt werden
disabled: if Datum < today() then true else false, // hier können eigene Abhängigkeiten definiert werden, wenn bei einer Bestimmten Bedingung das select nicht klickbar sein soll        
disabled: "", // default: false (das select ist anklickbar)

emptyValue

In dem Parameter emptyValue bestimmst du, was der Text des zurücksetzen Buttons (erstes Auswahlfeld im geöffneten dropdown/items) sein soll.(seit v1.1.0) (wird überschrieben, wenn im reset Block bei title etwas eingetragen ist)

!! Vorerst bleibt der bisherige Einstellungs-Parameter emptyValue: "zurücksetzen"noch aktiv, nutzt aber bitte in Zukunft für diese Einstellungen den Parameter title: "zurücksetzen" im reset Block.

emptyValue: "empty", // eigener Text
emptyValue: "", // default: "(leer)")

reset Block

In dem Parameter Block reset kannst du den Titel des zurücksetzen Buttons (erstes Auswahlfeld im geöffneten dropdown/items) bestimmen. Hier kannst du entweder über value dem zurücksetzen Button nicht einfach null, sondern auch andere Werte, wie 0 zurückgeben. Oder du kannst mit hide: true auch den zurücksetzen Button komplett ausblenden und somit ein Zurücksetzen des Selects verhindern. (seit v1.6.0)

reset: {
			title: "reset",
			value: 0,
			hide: true
		},

Einzelerklärungen:

  title: "reset", // eigener Text
  title: "", // default: Wert in Parameter emptyValue (falls emptyValue: "" dann ist hier default: "(leer)")
  
  value: 0, // eigener Wert (0 = setzt den Wert auf 0 statt null zurück)
  value: "", // default: null (Ninox-Feld wird null gesetzt)

  hide: true, // select kann nicht zurückgesetzt werden
  hide: "", // default: false (zurücksetzen Button wird angezeigt)

currentValue

Bei currentValue bestimmst du, was als ausgewähltes Element angezeigt werden soll. In der Regel schreibst du dort die Bezeichnung des Ninox-Feldes ein. Du kannst hier aber auch mit zb customLayouts, custombadges und customButtons den currentValue individuell gestalten und um weitere Funktionen erweitern.

currentValue: text(Status), // Bezeichnung deines Ninox-Feldes innerhalb von text()
currentValue: arcCustomBadge({
		uniqueId: "customBadge" + Nr,
        embedded: true,
		width: "100%",
		icon: "",
		iconPosition: "",
		fontSize: "",
		fontWeight: "700",
		borderRadius: "",
		singleColor: color(Status),
		fontColor: "",
		backgroundColor: "",
		borderColor: "",
		paddingY: "5px",
		paddingX: "10px",
		value: text(Status)
	}), // individuell gestaltetes customBadge mit der Bezeichnung deines Ninox-Feldes bei value
  currentValue: "", // default: es wird nicht der ausgewählte Wert angezeigt, sondern der placeholder

items Block

In dem items Block definierst du die items, die bei dem sich aufklappenden dropdown angezeigt werden.
Du kannst das customSelect auf zwei verschiedene Weisen aufbauen. Dynamische Wiedergabe von Ninox-Werten (z.B. Hilfs-Tabelle Status_Leads) oder eine manuelle Liste als select Items (um z.B. die Auswahl bei einem einfach Ninox Auswahlfeld nachzustellen).

Hast du eine Liste, die wiedergegeben werden soll, kannst du die Items mithilfe von select anzeigen lassen:

items: let id := Nr;
		(select Status_Projekte).[{
			title: Titel,
			active: number(id.Status) = number(Nr),
			value: number(Nr)
			}]

Mit der anderen Möglichkeit kannst du die einzelnen Items manuell aufbauen:

items: [{
				title: "Offen",
				active: Status = 1,
				value: number(Nr)
			}, {
				title: "In Arbeit",
				active: Status = 2,
				value: number(Nr)
			}, {
				title: "Erledigt",
				active: Status = 3,
				value: number(Nr)
			}]