8

Custom NX List

Hello Ninox Community, ich habe in den letzten Jahren viel an den Grenzen Ninox gearbeitet mit dem Ziel, das User Interface aufzumöbeln. Einer der häufigsten Pains meiner Kunden sind Einträge, deren Werte direkt auf der Untertabellen Ansicht bisher nicht geändert werden konnte. Hier nun das Ergebnis meiner persönlichen Challenge, in Ninox Listen mehr Usability reinzubringen: die ersten Version einer Untertabelle in der man direkt ein Ja/Nein Feld an-/abhakt. 

Die Tabelle kann direkt über eine einfach zu schreibende Formel generiert werden. Die Herausforderung war, das man jegliche Tabellen aus einer Zeile Code ansteuern kann (wer eval() und Global Functions kennt, weiß was ich meine).  Die Spalten können über Plus-Zeichen getrennt werden und lesen die Felder der jeweiligen Tabelle aus. Das "Checked" ist der Name des Feldes das an-/abgehakt werden soll.

Das Ziel ist, in den kommenden Wochen weitere coole Design Features einzubauen.

 

Fragen oder Anregungen gerne im Kommentar oder als PM.

15 Antworten

null
    • Icarus_Ralf_Becker
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Hallo Jakob, ich kann das Video nicht abspielen. Da kommt ein Fehlercode. Geht das nur mir so? VG Ralf

    • Icarus_Ralf_Becker
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Lag wohl doch an mir. Bin echt beeindruckt. Wie hast du hast gemacht? Verrätst du uns das?

      • NX Stylist, Prozessmanager & UI Designer
      • Jakob_Jordan
      • vor 1 Jahr
      • Gemeldet - anzeigen

      Icarus - Ralf Becker danke danke :) alle mit HTML/CSS + etwas JS ... alles werde ich hier nicht offenlegen, aber ich nehme euch mit im Prozess und versuche ab und an die Fortschritte zu posten. Dabei kann ich dann auch etwas zum Einsatz von HTML/CSS in Ninox sagen. Hier kann man tolle Sachen machen :) 

    • Icarus_Ralf_Becker
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Ich gehe davon aus, dass die Tabelle in einem einzigen f(x) mit eigenem HTML/CSS gebaut ist. Was ich nicht nachvollziehen kann, wie du onclick auf dieses eine f(x) unterscheiden kannst, ob ein Checkmark gesetzt oder der Datensastz per Popup eingeblendet wird.

    • T_Bartzsch
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Ya Man!!!! :) Sauber. Ist das Ganze auch "Update-Stabil" oder kann es sein, dass einem die db bei jedem Update seitens NINOX um die Ohren fliegt - wie zuletzt einige hier das Problem hatten? 

      • NX Stylist, Prozessmanager & UI Designer
      • Jakob_Jordan
      • vor 1 Jahr
      • Gemeldet - anzeigen

      T. Bartzsch danke sehr! Ich denke das styling wird schon update stabil sein, da ich hier alles in eigene Klassen setze, die von Ninox vermutlich nicht genutzt werden. Hast du einen Hinweis auf gemeldete Probleme hier im Forum dazu? Würde mich interessieren.

    • mirko3
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Sehr cool. Tolle Arbeit. Bleibt es ein Geheimnis?

      • NX Stylist, Prozessmanager & UI Designer
      • Jakob_Jordan
      • vor 1 Jahr
      • Gemeldet - anzeigen

      Mirko danke für das Feedback. Macht auch echt Spaß Ninox mit neuen UI-Elementen zu erweitern ^^. Habe noch etliche andere Pfeile im Köcher - viele davon auch erprobt. Ein paar Dinge zeige ich hier nicht (die JS-Sachen), ein paar Dinge kann ich hier schon zeigen :) . Vor allem wie cool man HTML/CSS mit Ninox-Logik verbinden kann.

    • RoSoft_Steven_Rooryck
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Danke, sehr schön. Ich bin bereits einer der Follower auf Youtube....

    Steven

    • T_Bartzsch
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Hey Jakob, ich hatte hier unlängst - ich glaube nach dem Update - irgendeinen Beitrag gelesen, wo es die Datenbank komplett zerschossen hat, mit teilweisen Überlagerungen und völlig unverständlichen Symptomen. Und da ging es auch darum, dass diese "CSS Hacks" ja eigentlich offiziell nicht von NINOX unterstützt werden und man daher auch bei einem Updaten nie sicher sein kann...  Aber prinzipiell find ich das ganze Thema echt genial - und das öffnet natürlich für die NINOX wieder ganz andere Möglichkeiten, sobald man "das Fass" erstmal geöffnet hat. Genau wie RestAPI und der Integration in die NINOX. Auch ein riesen "Augenöffner" was dann da alles möglich wird... 

      • NX Stylist, Prozessmanager & UI Designer
      • Jakob_Jordan
      • vor 1 Jahr
      • Gemeldet - anzeigen

      T. Bartzsch das kann ich mir gut vorstellen. Ich hatte auch schon so die ein oder anderen Fälle wo meine stylings die Ninox Oberfläche zerschossen haben. Ich habe dann angefangen meine Klassen eindeutiger zu benennen, bzw. vieles einfach inline zu stylen (damit kann man ohnehin viel mehr machen, da du hier dynamisch werte aus den Datensätzen einfließen lassen kannst...siehe meine neuesten Beitrag zu Einträgen mit farbigem Hintergrund).

      Und zum "Fass": sehe ich 100% genau so! Ich persönlich sehe als UI-Designer Ninox seit einiger Zeit noch mal ganz anders. In HTML / CSS war ich schon lange sehr gut, aber nie konnte ich die Backends bauen. D.h. ich war immer abhängig von einem Backend-Developer, wenn ich bestimmten Userflows entwickeln wollte. Mit Ninox bin ich komplett unabhängig und kann komplett Freidrehen 😄

      Ich forsche jedenfalls weiter und teile die Ergebnisse mit euch, soweit es geht. Schönes WE Dir!

    • NX Stylist, Prozessmanager & UI Designer
    • Jakob_Jordan
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Ich habe noch etwas weitergebastelt. Das Video dazu findet ihr hier: https://forum.ninox.de/t/83hdjxa

    • KURT (Korrektur- und Rückmeldetool)
    • Sebastian.5
    • vor 1 Jahr
    • Gemeldet - anzeigen

    vielen Dank für diese inspirierende Vorstellung :) 

    Kannst du noch etwas zu den Funktionen eval und list sagen? Weder in der Ninox-Dokumentation noch im Forum finde ich etwas brauchbares zu diesen Funktionen. Wie werden die genau definiert? So eine schicke Tabelle mit flexibler Zeilenhöhe, so wie du sie hast, hätte ich z.B. auch gerne :) Lassen sich diese Funktionen auch drucken? Die print engine verhunzt ja leider so einige Funktionen, die im Backend noch schick aussehen...

    In dem Video hast du zwar die Funktion angegeben und ich kann die Grundstruktur von list verstehen, aber ich frage mich was sich hinter "ToDoListe" verbirgt - eine Tabelle?

      • UweG
      • vor 1 Jahr
      • Gemeldet - anzeigen

      Sebastian Wie ich es lese ist die Funktion list() eine eigene programmierte globale Funktion.
      eval() ist eine undokumentierte Funktion von Ninox, die offiziell nicht von Ninox unterstützt wird und deshalb auch in der Dokumentation nicht beschrieben wird.
      Näheres zu eval() findet man in der Reference-DB im deutschen WebinarTeam.
      Sofern Jakob die zugehörigen Scripte nicht veröffentlicht, muss man seinen eigenen Grips anstrengen um die Funktionalität nachzubauen.

      Ich könnte es aufgrund meines rudimentär vorhandenem Html/CSS-Wissens nicht. 


      Aber dennoch ist es ein schöner Workarround.

      • NX Stylist, Prozessmanager & UI Designer
      • Jakob_Jordan
      • vor 1 Jahr
      • Gemeldet - anzeigen

      Sebastian Hey Sebastian, wie UweG  korrekt beschrieben hat ist list() eine globale Funktion hinter der HTML/CSS und einige Spielereien mit eval() stecken. Mein Ziel ist es eine Funktion zu bauen, die ohne HTML/CSS Kenntnisse eingesetzt werden kann. Da Ninox Tabelle nur schwer dynamisiert einzusetzen sind habe ich eval() zu Hilfe genommen. Sehr coole Sache :)

      Die flexible Höhe kam quasi automatisch mit dem Eigenbau, auch die Formatierung aus Richt-Text Feldern.

      Zum Drucken...habe ich mal ausgetestet und hier angehangen. Geht soweit ganz gut. Ich müsste noch eine Print CSS bauen die bestimmte Elemente ausblendet. Ich werde weiter in der Richtung forschen 👍

Content aside

  • 8 „Gefällt mir“ Klicks
  • vor 1 JahrZuletzt aktiv
  • 15Antworten
  • 632Ansichten
  • 15 Folge bereits