0

Dashboard Design

Guten Tag, 

das Bild stammt von dem Ninox CRM Video.

Meine Frage wäre: wie bekommt man diese Widgets? 

Finde das Design sehr übersichtlich.

MfG 

Kevin

17 Antworten

null
    • Ninox-Professional
    • planoxpro
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Hallo Kevin, mit etwas HTML/CSS-Kenntnissen lässt sich sowas in einem Formelfeld selber bauen. Ansonsten bietet arcRider gegen Bezahlung auch fertige Design-Widgets für Ninox an:

    https://www.arc-rider.de/documentation

    • Rafael_Sanchis
    • vor 1 Jahr
    • Gemeldet - anzeigen

    I use some similar widget

    • Rafael_Sanchis
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Maybe this Link help.

    https://forum.ninox.de/t/g9yh6s0

      • Kruna
      • vor 1 Jahr
      • Gemeldet - anzeigen

      Hi Rafael, where do you change the color of the bar. I cant find it at all, ty :-)

      EDIT: Sorry, I should check the link first 😉

      • Rafael_Sanchis
      • vor 1 Jahr
      • Gemeldet - anzeigen

       Hi Kruna

      progress::-webkit-progress-bar {background-color: silver; width: 100%;border-radius:.5em;}
      progress::-webkit-progress-value {background-color: rebeccapurple !important;border-radius:.5em;}
      progress::-moz-progress-bar {background-color: silver !important;}

      • Kruna
      • vor 1 Jahr
      • Gemeldet - anzeigen

      thank you very much. :-)

      I had to add this too:

      progress {
          width: 100%;
          height: 10px;
          background:silver;
          border: thin solid silver;
          border-radius:.6em;
          accent-color:  white;
      }

      Now its perfect! :-)

      • Rafael_Sanchis
      • vor 1 Jahr
      • Gemeldet - anzeigen

       

      • Rafael_Sanchis
      • vor 1 Jahr
      • Gemeldet - anzeigen

       

      You know something about the arrows ? Up/Down 

      • Kruna
      • vor 1 Jahr
      • Gemeldet - anzeigen

      what arrows up/down do you mean?

      • Rafael_Sanchis
      • vor 1 Jahr
      • Gemeldet - anzeigen

       

      The Red on Green arrows 👍

      • Kruna
      • vor 1 Jahr
      • Gemeldet - anzeigen

      no, unfortunately not.

      I think this was another way to use css and html boxes and maybe there it is possible to use the arrows.

    • Kev_fo
    • vor 1 Jahr
    • Gemeldet - anzeigen

    thank you Rafael.

    Danke planox. 

    • mirko3
    • vor 1 Jahr
    • Gemeldet - anzeigen

    A simple example is at bottom. Color and arrow change if price is changes. Other arrows are ← | → | ↔

    let price := 50;
    let arrowColor := switch true do
        case price < 100:
            "style = 'color: red'>&uarr;"
        case price >= 100:
            "style = 'color: green'>&darr;"
        end;
    let content := "
    <style>
    p{
    font-size:x-large;
    }
    </style>
    <p " +
        arrowColor +
        "</p>";
    html(content)
    
      • Rafael_Sanchis
      • vor 1 Jahr
      • Gemeldet - anzeigen

       Excelent gift. 👍

      • Rafael_Sanchis
      • vor 1 Jahr
      • Gemeldet - anzeigen

       

      Hi Mirko

      One Question there are any way to separate the arrow attribues  and text comment attributes

      Thanks

      let arrowColor := switch true do
          case Value < 100:
              "style = 'color: red'>&darr; <text> project is over budget."
          case Value > 100:
              "style = 'color: green'>&uarr; <text> Project is performing well against the budget. "
          case Value = 100:
              "style = 'color: blue'>&varr; <text> project is performing on budget."
          end;
      let content := "
      <style>
      p{
      font-size:16px;
      font-weight: bold;
      }
      </style>
      <p " +
          arrowColor +
          "</p>";
      html(content)
      • mirko3
      • vor 1 Jahr
      • Gemeldet - anzeigen

       try this. It's not fancy HTML but it works.

      let Value := 110;
      let pContent := switch true do
          case Value < 100:
              "style = 'color: red; font-size:x-large;'>&darr; <span style='color:black; font-size:medium;'> project is over budget.<span>"
          case Value > 100:
              "style = 'color: green; font-size:x-large;'>&uarr;<span style='color:black; font-size:medium;'> Project is performing well against the budget.<span>"
          case Value = 100:
              "style = 'color: blue; font-size:x-large;'>&varr;<span style='color:black; font-size:medium;'> project is performing on budget.<span>"
          end;
      let content := "
      <style>
      p{
      font-weight: bold;
      }
      </style>
      <p " +
          pContent +
          "</p>";
      html(content)
      
      • Rafael_Sanchis
      • vor 1 Jahr
      • Gemeldet - anzeigen

      Too much better. Thanks