Mini Widgets

Select (Dropdown)

1.5.0

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: "LeadStatus" + Nr,
	recordId: Nr,
	field: "",
	embedded: false,
	width: "",
	height: "",
	itemsWidth: "",
	itemsHeight:"",
	fontColor: "",
	backgroundColor: "",
	borderColor: "",
	borderWidth: "",
	labelSettings: {
		title: "",
		fontSize: "",
		alignX: "",
		height: ""
	},
	clickPosition: "icon",
	placeholder: "Filter wählen",
	reset: {
			title: "emptyValue",
			value: 0,
			hide: true
		},
	currentValue: text(LeadStatus),
	items: let id := Nr;
		(select Status_Leads).[{
			title: Titel,
			active: number(id.LeadStatus) = number(Nr),
			value: number(Nr)
			}]
})

Du kannst das customSelect auf zwei verschiedene Weisen aufbauen. Dynamische Wiedergabe von Ninox-Werten (z.B. Tabelle Status_Leads) oder eine manuelle Liste als select Items.

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

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

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

items: [{
				title: "Item 1",
				active: "",
				value: number(Nr)
			}, {
				title: "Item 2",
				active: "",
				value: number(Nr)
			}, {
				title: "Item 3",
				active: "",
				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

itemsWidth

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

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.

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

fontColor

fontColor bestimmt die Farbe der Select-Button-Umrandung.

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

backgroundColor

Mit backgroundColor gibst die Hintergrundfarbe des select Feldes an.

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

borderColor

borderColor bestimmt die Farbe der Select-Button-Umrandung.

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

borderWidth

Mit borderWidth bestimmst du, wie breit die Select-Button-Umrandung sein soll.

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

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.

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

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

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

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

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

Zurück

Input

Zurück

Input

Weiter

Pagination

Weiter

Pagination