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!
140 replies
-
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!
-
yessssss
, I managed to assign color for choice field like you described herelet x := (select Appointments); let _events01 := x[choicefield=1].{ //some code here }; let _events02 := x[choicefield=0].{ //some code here };Now, how can I assign color by employees?
thnx a lot
-
Congrats, I'm happy to say that it's not as difficult as you might think to understand Greek!
How many employees does your table have?
-
Good morning
thank you very much. The docs from fullcalendar with respective demos and last but not least learning by doing helped a bit to understand some more to understand - Greek.
For now there are only two employees, but maybe I will have to use two records for each employee, so there could be four 'colors' - maybe more to come.
thnx
-
Hi, four colors is not too many, so you can follow the same logic and create four unique event sources and then assign a different color to each.
-
me and logic...
Well here I used the unique events based on the choice field and I have only two choices, so I am not sure how to create other four? I dont know how to achieve this. My first approach ist that each employee has a record ID.In one of your previous suggestions you wrote
let x := (select Appointments); let _eventsUser01 := x[text(_cu)="User01"].{ backgroundColor: if 'choice field'=1 then "#3485FF" end, borderColor: if 'choice field'=1 then "#73455FF" end, textColor: if 'choice field'=1 then "#6578FF" end, //some code here };So, is there a way to - lets say -
let _eventsUser01 := x[Employee_record_id=1].{
thnx
-
Version 8.1
Floor plan:
Hello everyone
came up with this idea in a post, so I thought I'd add it to the dashboard as it might be useful for other users too.
The Leaflet library lets us turn any image or photo into a map surface.
Once we know the dimensions of the image, we can easily convert them to coordinates with a 1:1 ratio and use all the great features that Leaflet offers (such as markers, shapes, popups, zoom in/out, events on click, and more).
I'm using a floor plan as an example here. When you move the mouse over each room, it highlights in colour. Click on it and a pop-up containing a photo of the room appears.
Have fun!
-
Version 8.2
Video player:
Hello everyone,
mentioned in this post that we could use HTML to play our videos in Ninox.
Although I have no experience in video management, I could not resist his kind encouragement to add similar functionality to the dashboard.
So, I spent a few hours searching the web for an HTML5 player that would work out of the box, be lightweight, and allow for customization.
I present Vidstack as a proof of concept rather than a complete Ninox solution.
It is welcome if anyone has a suggestion for a better player or would like to contribute in any way.
At least enjoy the Sprite Fright short film!
-
Version 9.0
Input Form widget
Hello everyone,
After several days of hard work and a few challenges along the way, I'm happy to present my new widget. It's a custom data entry form in Ninox to replace the familiar left-sliding native form.
So, what's new with this widget?
- It's a pop-up design that lets you interact with the background (after opening, it remains visible unless you choose to cancel).
- You can move (drag) it anywhere on the screen.
- The cursor can be auto-focused on any field.
- It supports almost all Ninox fields, like text, password, date, option, and so on.
- The widget makes sure the data you enter is correct and meets the right requirements. If it isn't, you can't submit it, and you'll see an error message (e.g., Field is required).
- A hide/show svg eye icon to toggle password visibility.
- You can put it anywhere on your Table forms or Pages since it's just a custom formula button (Create record).
Paste your Ninox API key into the corresponding field of the 'Settings' table to test it inside the Dashboard Template.
Enjoy!
-
That is really cool. You have added a wealth of tools. Thanks, from the community.
-
I forgot to mention that another great feature of the widget is that you can check for duplicates in any field of the table. I've already implemented it for the 'Username' field. Try entering a value in that field that already exists in the table, and you'll see an error message just below the 'Save' button.
-
Excelent work Sotirios.
One question the new calendar ?
Is posible to implement in a simple field. -
Appreciate the feedback! Happy to help and be part of such a great community.
-
Hi, The attached calendar is from your Android tablet? Would you like to see it in a Ninox date field too?
-
Yes is in Android Tablet (Galaxy Tab Ultra). And yes I would like to see it in a Ninox date field.
-
Upsss too different on web version.
-
Yes, this is to be expected and happens because the Widget borrows the default appearance of the date field of each Browser.
As you'll see in the code, I've set the type of the input field to simply 'date'.
-
Thanks for giving and I encountered this mistake when I submitted it
-
Hi there, have you added your Ninox API Key to the 'Settings' Table?
-
I forgot this step, thank you
-
So I have read and watched this thread (and the previous one) with interest and donloaded a copy a few days ago and indeed another this morning.
I have to say, I think you have produced something spectacularly good here. Straight off I can used several of the elements here and love the smooth scrolling of the page. The quality of the design is brilliant. I an running through your scripts to further my own education and have already played with some elements ie ( I like the analogue clock but wanted use it in a smaller size (and already reset this.)
At the moment, I am missing how you had drawn or where the images in the top buttons were input/sourced. but will discover this in time.
Your project shows the hidden power that could be behind Ninox if their design team developers got behind projects like this. There is not one feature on this project that is not practical and useful. Any thing I can think ok you are in place or earmarked already. I can hazard a guess at the number of hours you must have spent on this.
***** ABSOLUTELY BRILLIANT AND STUNNING PIECE OF WORK *****
Regrettably - It looks like you reside in in Greece and I am in England, but if ever it per-chanced that we should ever meet. I truly would like to by you a beer!
100% top job !-
Dear Mel, thanks for the kind words. It took a lot of research and work to get this project to this point, and you've given me the chance to share a few words about it.
My goal is to create a set of components or widgets that anyone can use in their database with just a few simple modifications.
I'd also love to get a better understanding of Ninox's functionality to help me develop my own application. To put it another way, the "Dashboard Template" shows how I'm trying to improve myself through practice.
In terms of the Ninox platform's future development, I don't think they need to reinvent the wheel. It'd be great to see more compatibility in integrating things like external libraries, and I'd also like to be sure that our custom code will still work in the future.
I used to live in Newcastle for a short period, so the idea of having a pint of Guinness in a classic old English pub with you brings back fond memories!
-
-
I did not want to spoil my praise of your work in my reply above.
However I have 2 comments to make.
1. Do you think it would be possible to alter the table view row height in ( know it is the same height as standard table view) but ninox allow on a table itself for the row hight to expand or contact. I wondered if on could have a control to allow a set height? - I have asked Ninix several time if this is possibe to do on view when placed on a table or page. or when placed as a child form. ie if you do a quote and it has say 12 line in the child records then that quote looks way long. Being able to bring the row height down would be great.
So more like as shown on tables at min height
2. I notice that if you open the page and DO NOT press any top button but scroll down with the mouse wheel then at some point it catches either the map or floor pan and instantly starts to adjust the images height instead of carrying further down the page. I'm not suggesting that this is a fault but wondering if this is a side effect of scrolling without pressing the button to jump to each section
Content aside
-
7
Likes
- 1 hr agoLast active
- 140Replies
- 1410Views
-
12
Following