Ninox-cards vs HTML-cards

mirko3
vor 8 Monaten
9Antworten

Kleine Bastelanleitung für eigene Cards im Dashboard. Sonst ähnliche Funktionalität bei freierer Gestaltung. Suche funktioniert ohne Enter, was ich funktionell besser finde und kann auch diffiziler programmiert werden. Z.B. Eingabe von "Mär" liefert alle Märzgeborene. Mirko

yellow_scissors
vor 8 Monaten
Gemeldet - anzeigen

Na, da hatten wir ja am gleichen Tag eine ähnliche Idee, wobei dein Code natürlich 1000x aufgeräumter aussieht als mein Chaos ;)

Das hier habe ich vorhin im Englischen Forum geteilt:

https://forum.ninox.com/t/x2y6gb7/html-responsive-grid-container-custom-buttons

Bei mir habe ich noch zusätzlich Buttons in den Cards, um verlinkte Datensätze zu öffnen - in meinem Fall den Termin und das zugehörige Projekt und den Kunden, um den es geht.

In den nächsten Tagen versuche ich dann mal, meine Cards nach deinem Stil nachzubauen und vielleicht damit meine eigene Frage zu beantworten - wie man am besten die informationen innerhalb der Card darstellen kann (ich hätte meine Buttons gerne an der rechten Seite übereinander)

grid-container.ninox

- yellow_scissors
- vor 8 Monaten
- Gemeldet - anzeigen
und schon klappt's .. deine demo hat sehr weitergeholfen, danke!
- mirko3
- vor 8 Monaten
- Gemeldet - anzeigen
Deine Arbeit habe ich auch mit Interesse verfolgt und Anregungen entnommen. Ich hatte nur keinen privaten Anwendungszweck verfolgt, sondern wollte eine optimierte Version der Ninox-cards "kopieren". Dafür ist diese Listenversion geeignet genug. Will man diffizile Unterteilungen innerhalb der cards, könnte man auch grid in grid bringen. Bin gespannt, wie Dein Ergebnis wird. Mirko

yellow_scissors
vor 8 Monaten
Gemeldet - anzeigen

genau, jetzt wo ich das gridsystem verstanden habe, kann ich wirklich alles so anordnen, wie ich möchte ;)

let apps := (select Appointments where Status = 1);
let buttons := (select html);
let css := "<style>
  .gridFirst {
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(20em, 1fr));
      column-gap:10px;
    row-gap:20px;
  }
  .gridSecond {
    display:grid;
    grid-template-columns:max-content auto max-content;
grid-template-rows:auto max-content;
  }
  .gridFormHead{font-weight:bold}
  .gridFormAll{
    box-shadow:-2px -2px inset dimgray;
      font-size:12px;
       padding:1em;
      border-radius:1em;
      color:darkslategray;
    background-color:rgb(230,230,230);
  }
  .gridFormAll:hover{
    background-color:hsl(93, 57%, 18%);
    cursor:pointer;
  }
  dd {text-align:right;margin:1px;}
de{margin:auto auto auto 1px;}
  dt{font-variant:small-caps;
text-align:left;}
  hr {color:darkgray;}
  </style>";
let body := ---
<aside class = 'gridFirst'>{ for app in apps do }
     <aside class='gridFormAll' >
      <aside class='gridFormHead'> <span  onclick=ui.popupRecord('{ app }')>  { app.Projects.Clients.Name } </span> </aside>
  <hr>
    <dl class='gridSecond'>
      <dt>{ buttons.butt4 }  </dt><de>  { app.AppointText }</de>   <dd><span      onclick=ui.popupRecord('{ first((select Clients)[number(Nr) = app.Projects.Clients]) }')>{ buttons.butt1 }</span> </dd>
      <dt>{ buttons.butt5 }</dt> <de> { app.StaffText }</de> <dd><span      onclick=ui.popupRecord('{ first((select Projects)[number(Nr) = app.Projects]) }')>{ buttons.butt2 }</span></dd>
      <dt>{ buttons.butt6 } </dt><de>{ app.Location }</de><dd> { buttons.butt3 }</dd>
    </dl>
    </aside>{ end }

  </aside>
    ---;
html(css + body)

- tschijoh
- vor 7 Monaten
- Gemeldet - anzeigen
Guten Morgen MP

ich habe bestimmt was falsch gemach in der ersten Zeile bekomme ich einen Fehler: let apps := (select Appointments where Status = 1);

Könntest du mir da auf die Sprünge helfen?

Ich finde eure Arbeit mit den Karten super.
- yellow_scissors
  
  vor 7 Monaten
  
  Gemeldet - anzeigen
  du hast den code in ein formelfeld kopiert und bekommst dann diese fehlermeldung? hast du denn eine tabelle mit dem namen "Appointments" und darin ein Auswahlfeld mit dem Namen "Status"? Damit der Code funktioniert brauchst du genau die Tabellen wie in der Demo DB, oder du musst ihn an deine DB anpassen
- tschijoh
  
  vor 7 Monaten
  
  Gemeldet - anzeigen
  Guten Morgen, genau den Fehler habe ich gemacht. Aber wie bekomme ich die buttons4,5,6?
- yellow_scissors
  
  vor 7 Monaten
  
  Gemeldet - anzeigen
  schau mal in der "html" tabelle. dort musst du einfach ein neues formelfeld mit dem namen "butt3", "butt5", ... erstellen und den code von button 2 oder 3 einfügen
  
  html("<body> <button id='button1'> <span class='ph-thin ph-alarm'></span> </button> </body>")
  
  dann gehst du auf https://phosphoricons.com/, suchst dir dein lieblings-icon heraus und ersetzt in diesem beispiel "alarm" durch den namen deiner wahl, beim "airplane-takeoff" würde die zeile dann z.b. <span class='ph-thin ph-airplane-takeoff'></span> heißen
  
  über den ersten. button, "butt1", kannst du überigens größe, farbe, hintergrund, .... deiner buttons im skript ändern. diese änderung bezieht sich dann auf alle buttons.
  
  und noch etwas: einige icons bei phosphor sind mit einem "neu"-punkt markiert, diese kann man leider noch nicht einfügen, da versuche ich noch zu verstehen, was ich am skript ändern müsste
- tschijoh
  
  vor 7 Monaten
  
  Gemeldet - anzeigen
  Guten Morgen, Super das hat mich weiter gebracht. Danke für die Unterstützung.

Willkommen in der Ninox-Community

Ninox-cards vs HTML-cards

9 Antworten

Content aside

Kategorien

Übersicht