Beispiele
Image-Slider
Image-Slider
Du willst verschiedene Bilder aus einer Tabelle mithilfe eines Image-Sliders einfach und übersichtlich durchschalten? In diesem Beitrag findest du eine detaillierte Anleitung, welche Ninox-Einstellungen du benötigst und den dazugehörigen Anwendungscode.
Widgets, die dafür benötigst:
Ninox Einstellungen, die du benötigst:
Eine Tabelle mit folgenden Feldern:
Bild (Dokumenten/Bild Feld)
shareUrl (URL Feld)
sortId (Zahlen-Feld)
Beschreibung (Text-Feld)
Ein Hilfsfeld (Text) in der Tabelle, in der der Image-Slider dargestellt werden soll. Hier im Beispiel: currentImage
![](https://framerusercontent.com/images/lm9TX63iMrK06COA4FkH9bpn48.png)
Anwendungscode
Vorgehensweise
Solltest du die oben beschriebenen Vorkehrungen bei dir getroffen haben, kannst du loslegen und den Anwendungscode des Image-Sliders in einem Formelfeld integrieren.
Ninox Einstellungen
In der Ninox Tabelle für die Bilder, sollte das Zahlenfeld der sortId immer ausgefüllt sein mit einer aufsteigenden Nummer. Diese bestimmt wann welches Bild angezeigt werden soll. Die shareUrl des Bildes ist besonders wichtig, damit das Bild über das Widget Custom Image richtig ausgegeben wird. Hier kannst du bei dem Bild-Feld einen Trigger nach Änderung hinterlegen, der bei Upload eines Bildes, die share URL automatisch in das Feld schreibt. So sieht der Code für Trigger nach Änderung aus:
![](https://framerusercontent.com/images/Z1ncYPYpGQ7ARLeLsiDWjtVE.png)
Hinterlege ein Textfeld auf der Tabelle, auf der du deinen Image-Slider integrieren möchtest. (Hier: currentImage)
Anwendungscode
Erstelle ein Formelfeld, in dem du den oben beschriebenen Anwendungscode einfügst.
Als erstes müsstest du in den Variablen deine Tabelle referenzieren. Statt "Images_Slider" setzt du den Namen deiner Ninox Tabelle mit den Bildern ein. Für "sortId" nimmst du den Namen deines Sortierungsfeldes in der Bildertabelle.
Ersetze dann in den Custom Buttons die fieldId mit der Field Id des Feldes currentImage auf deiner Zieltabelle. Dies machst du bei dem Butten "caret-left" und bei dem Button "caret-right".
Setze in den Record-Referenzierungen den Namen deiner Bildertabelle und deines Feldes auf der Zieltabelle ein. Nun solltest du startklar sein mit deinem Bilder-Slider. 🚀 🏞️