7

Dashboard Template

Hello everyone!

After the    post, I decided to start a new one. This will make it easier to follow the changes.

New features have been added:

  • Sticky buttons. Thanks to   CSS hacks, I was able to make the buttons component sticky. Now the buttons always remain visible to the top of the page as we scroll down.
  • Scroll into View. By clicking a button the page automatically scrolls into the correspoding section. In the attached database press the first button "Accounts" to see it in action.

The combination of the above two features has the potential to transform the way we design our Dashboards. Like the one-page websites, we can present our content in sections on one long Dashboard.

In Safari works but I haven't check it in other browsers. Let me know if you find any bug.

What other functionalities would you like to see?

Leave here your suggestions, ideas or improvements!

Enjoy!

85 replies

null
    • szormpas
    • 3 wk ago
    • Reported - view

    Version 7.3

    Map improvements:

    Hi everyone, custom markers are a great way to get creative since any image can be a marker on our map. However, if you want each point to have its unique one, it can become a bit time-consuming since you must introduce a new PNG file for each. In this version, I've added a few cool features to make the map more functional.

    • Circle markers: The component lets you draw circles with a radius you specify in pixels (so the size in meters changes with zoom). You can use it to set the radius, width, colour, fill colour, opacity, and so on.
    • GeoJSON: This is a special type of JSON object that's used to represent vector geometries, with or without non-spatial attributes. GeoJSON is a really popular format for mapping data, and Leaflet is great at handling it. Since Ninox scripting makes it so easy to construct JSON objects, we can present any data from our database on the map in whatever way we want. On top of that, we can also import external GeoJSONs. If you want to create your own, there's a really easy way to do it with geojson.io.
    • Multiple maps: You can load a few different base maps, so the user can choose one that suits them best.
    • Filtering and grouping: The library can filter the data based on geojson properties, which means we can create groups and show them on the map in a selective way.

    In my example, you'll find a layer control panel in the top right corner where you can choose a base map and filter the markers based on the status field of the Accounts table.

    Enjoy!🙂

      • gold_cat
      • 2 wk ago
      • Reported - view

       
      Hi friend, I found that the database cannot use the following code in the 'On Open' trigger. Is this an issue?

      openTable("Dashboard")
      
      • szormpas
      • 2 wk ago
      • Reported - view

         Hi, the 'Dashboard' is a Page, so try this:

      openPage("Dashboard")

      • gold_cat
      • 2 wk ago
      • Reported - view

        thank you friend~

    • szormpas
    • 12 days ago
    • Reported - view

    Version 8.0

    Calendar (scheduler):

    Hello everyone,

    As we all know, Ninox's built-in calendar is pretty basic and has limited capabilities. I thought that if we integrated a custom calendar directly within the dashboard, we could add features that would enhance the user experience.

    FullCalendar.io is a JavaScript library that provides its core as open source. The good news is that its code seems to be quite compatible with Ninox. I was able to fully integrate it and store it inside the Ninox database (no dependency on CDN links).

    I've been able to develop the following features so far:

    • You can upload and display data directly from the Ninox database (event sources).
    • When you hover the mouse over each event, a tooltip will appear (thanks to the hint.css library).
    • When you click on an event, the corresponding record will pop up.
    • To schedule a new event, just choose one or more free slots in the calendar. A new record will be created automatically and populated with the corresponding dates (thanks to  for sharing the use of the fetch method in this post).
    • If you need to change the time of an event, just drag and drop it into a different time slot. The record in the Ninox database will be updated right away.
    • You can edit the events on the calendar, which means you can move and resize their start and/or end times.
    • I've added three views (month, week, day), and I've got more in the pipeline!

    I'm thrilled to announce the launch of the first free, open-source scheduler for Ninox! ☺️

      • szormpas
      • 12 days ago
      • Reported - view

         

      I forgot to delete my Ninox API Key from the shared database. For security reasons, I had to delete it. If you try to create a new or modify an existing event inside the calendar, you'll get an alert saying "HTTP status error: 401 - Unauthorized."

      To unlock the scheduler capabilities, you just need to create your API Key (Personal Access Token) and paste it into the respective Value field in the 'Settings' table.

      Enjoy!

      • Kruna
      • 5 days ago
      • Reported - view

       good morning - I have some problems adapting this awesome calendar! Its amazing what you create and share in Ninox - chapeau!

      Here is my adapted code - no error is shown, but still the calendar wont show up.

      let _events := x.{
              id: number(Nr),
              title: let t := this;
              (select '2. Standortvorschläge' where Nr = t.'Standortvorschlag zu Firma/Eigentümer').(Vorname + "  " + Nachname),
              start: format('erstellt am', "YYYY-MM-DDTHH:mm"),
              end: format('Fällig am', "YYYY-MM-DDTHH:mm"),
              extendedProps: {
                  description: Informationen
              }
      

      I believe that the issue is here

              (select '2. Standortvorschläge' where Nr = t.'Standortvorschlag zu Firma/Eigentümer').(Vorname + "  " + Nachname),
       

      In your version

      Nr = number(t.Name)).('First Name' + " " + 'Last Name')

      the number(t.Name)) its a dynamic choice field, in my case its a linked table.

      Do you have an idea what might be wrong in my script?

      thanks Kruna

      • szormpas
      • 4 days ago
      • Reported - view

        Hi,

      You are right, 'Name' is a dynamic choice field that gets the ('First Name' + " " + 'Last Name') from the 'Accounts' table.

      In your setup you don't need a second select statement since the 'Aufgaben' table is linked to 'Standortvorschlag zu Firma/Eigentümer' table (N:1).

      You can try the following:

      let x := (select Aufgaben);
      let _events := x.{
              id: number(Nr),
              title: 'Standortvorschlag zu Firma/Eigentümer').(Vorname + "  " + Nachname),
              start: format('erstellt am', "YYYY-MM-DDTHH:mm"),
              end: format('Fällig am', "YYYY-MM-DDTHH:mm"),
              extendedProps: {
                  description: Informationen
              }
      • Kruna
      • 4 days ago
      • Reported - view

       I must be missing something because calendar wont show up.😫

      • Kruna
      • 4 days ago
      • Reported - view

       now it shows some errors, which hadnt been there before.

      • Kruna
      • 4 days ago
      • Reported - view

       does look the same, doesnt it?!

      • szormpas
      • 4 days ago
      • Reported - view

        Hi,

      I think you should try putting in plain text instead of the title to see if that's what's causing the problem:

      title: "Test",
      • Kruna
      • 4 days ago
      • Reported - view

       Hi Sotirrios, I imported the db from scratch and it would work except when wanting to enter a new task I get this error messages

      but I do see the other task and I can open them by clicking on them..

      • szormpas
      • 4 days ago
      • Reported - view

        Great, you get a status error: 500 which means that everything has been setup correctly except from a final configuration inside the "function createOrUpdateRecord(start, end, rid) {..."

      Replace the 'Start Time', 'End Time' and 'Id' in the following section:

                            var data = {
                          fields: {
                                 'Start Time': start,
                                 'End Time': end
                             },
                          ...(rid && { 'Id': rid })
                            };
      

      with the names of your fields ('erstellt am', 'Fällig am', 'Nr') like below:

                            var data = {
                          fields: {
                                 'erstellt am': start,
                                 'Fällig am': end
                             },
                          ...(rid && { 'Nr': rid })
                            };
      

      Let me know if everything is working now.

      • Kruna
      • 4 days ago
      • Reported - view

       you rock!!!👍😀 that did it - tons of thank you!!! now everything works perfect.

      I have two questions left please.

      I tried to translate here

        headerToolbar: {
                                  left: 'prev,next today',
                                  center: 'title',
                                  right: 'dayGridMonth timeGridWeek timeGridDay'
                                 },
      

           to    left: 'vor,nach heute',

      but its left empty. Is there a way to translate? I was looking at the script, but couldnt find another piece of code and the other question is whether it is possible to start week on monday insted of sunday?

      Thank you so much for your great help!
       

      • szormpas
      • 3 days ago
      • Reported - view

        yes, the Full Calendar library supports many languages.

      To translate the Scheduler to German you should do the following.

      First, just below the <script> ..."Full Calendar js library v6.1.15"...</script> insert the following script:

      <script>
      !function(e){'use strict';function t(e){return'Tag'===e||'Monat'===e?'r':'Jahr'===e?'s':''}var n={code:'de',week:{dow:1,doy:4},buttonText:{prev:'Zurück',next:'Vor',today:'Heute',year:'Jahr',month:'Monat',week:'Woche',day:'Tag',list:'Terminübersicht'},weekText:'KW',weekTextLong:'Woche',allDayText:'Ganztägig',moreLinkText:e=>'+ weitere '+e,noEventsText:'Keine Ereignisse anzuzeigen',buttonHints:{prev:e=>`Vorherige${t(e)} ${e}`,next:e=>`Nächste${t(e)} ${e}`,today:e=>'Tag'===e?'Heute':`Diese${t(e)} ${e}`},viewHint:e=>e+('Woche'===e?'n':'Monat'===e?'s':'es')+'ansicht',navLinkHint:'Gehe zu $0',moreLinkHint:e=>'Zeige '+(1===e?'ein weiteres Ereignis':e+' weitere Ereignisse'),closeHint:'Schließen',timeHint:'Uhrzeit',eventHint:'Ereignis'};FullCalendar.globalLocales.push(n)}();
      </script>
      

      Then, you should add an extra option (locale: 'de') inside the full calendar instance object like below:

              var calendar = new FullCalendar.Calendar(calendarEl, {
                  locale: 'de',
                  height: '100%',
                  ...
      • szormpas
      • 3 days ago
      • Reported - view

        another cool thing is that if you set the locale to 'de', it automatically accepts 'Monday (Montag)' as the first day of the week! 😉

      • Kruna
      • 3 days ago
      • Reported - view

       yes I noticed that cool thing too 😁 and therefore I managed to make it work. THANKS!!!

      Yet I am facing another challenging issue for me. I have task and appointments, therefore I have a yes/no field for wheather it is a task or appointment. For task I have two date fields and two hour fields seperated. The first date and hour field is for when the task is made the second when its due. For apppointment I have the appointment field. I need those fields to show in ninox calendar as it syncronizes with Apple iCal. The date+hour field in this awesome calendar wont show up in ninox calendar.

      I tried 

      start: format('erstellt am', "DD-MM-YYYYTHH:mm"),
      end: if 'als Termin festlegen' then
      format(Termin, "YYYY-MM-DDTHH:mm")
      else
      format('Fällig am', "YYYY-MM-DDTHH:mm")
      end,
      

      als Termin festlegen is the yes/no field Termin is the appointment field and Fällig am is the date field and hour field seperated. So basically what I am trying to achieve

      if yes/no field checked then appoinment field else date and hour field. Do you have an idea, if this is possible at first place?😅

      • szormpas
      • 3 days ago
      • Reported - view

        If I've got this right, you're looking for a way to pull out the start and end datetimes from an 'Appointment' field.

      For the start you can use this:

      format(start(Termin), "YYYY-MM-DDTHH:mm")
      

      While for the end you can use this:

      format(endof(Termin), "YYYY-MM-DDTHH:mm")
      
      • Rafael Sanchis
      • Rafael_Sanchis
      • 3 days ago
      • Reported - view

       

      With the slotMinTime and slotMaxTime you can adjust the day time.

      initialDate: savedDate,
                  slotDuration: '00:30:00',
                              slotMinTime: '08:00:00',
                              slotMaxTime: '18:00:00',
      
      • Kruna
      • 3 days ago
      • Reported - view

       yes, you are right and that works perfect now!👍 thank you so much for helping me sort out this issue.

      Next and hopefully last I am trying to resolve here is the yes/no field issue - the code is

      start: format(start(Termin), "YYYY-MM-DDTHH:mm"),
      end: if 'als Termin festlegen' then
                  format(endof(Termin), "YYYY-MM-DDTHH:mm")
              else
                  format('Fällig am', "YYYY-MM-DDTHH:mm")
              end,
      

      It doesnt show any error, but doesnt work at all. It seems not to be as easy as I thought 😅, but I am not sure wheather its possible at first place?

      • Kruna
      • 3 days ago
      • Reported - view

       muchas gracias Rafael, when I insert your script it shows me errors 😅

      Edit: I put it in the wrong lines, now its correct and a good point!! Thank you for the helpful hint👍

      If I put 18:00 it just shows till 17:00 and 18:00 its not clickable - is it supposed to be like that?

      • szormpas
      • 3 days ago
      • Reported - view

        Hi,

      Your code looks good to me. I tried it in a similar situation and it worked fine.

      One thing to look at is the field values, which shouldn't be null.

      Both the 'YES/NO' field and the corresponding datetime field need a value, otherwise the scheduler won't display the event.

      • Kruna
      • 2 days ago
      • Reported - view

       good morning - it somehow doesnt work for me. The appointments are shown however the date field not. I also tried to use a choice field 

      start: format(start(Termin), "YYYY-MM-DDTHH:mm"),
              end: switch Auswahl do
              case 1:
                  format('Fällig am', "YYYY-MM-DDTHH:mm")
              case 2:
                  format(endof(Termin), "YYYY-MM-DDTHH:mm")
              end,
      

      but case 1 doesnt work. :-(

      • szormpas
      • 2 days ago
      • Reported - view

       good morning. What kind of field is the 'Falling am', it should be a date/time field and not a plain Date field. Otherwise, you should combine a Date and a Time field.

      • Kruna
      • 2 days ago
      • Reported - view

       its only a date field the hour field is seperate. The reason why I have them seperated is that combine date/time field doesnt show in ninox calender. I need all fields with dates being showed in ninox calender too as its synchronized with iCal - the apple calendar. By the way is there a way to sync FullCalendar with iCal?

      I tried this without success...

      end: switch Auswahl do
              case 1:
                  format('Fällig am', "YYYY-MM-DD") + "" + format(Uhrzeit, "THH:mm")
              case 2:
                  format(endof(Termin), "YYYY-MM-DDTHH:mm")
              end,
      

      thanks

Content aside

  • 7 Likes
  • 2 days agoLast active
  • 85Replies
  • 941Views
  • 9 Following