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!
209 replies
-
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!
-
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!
Content aside
-
8
Likes
- 4 days agoLast active
- 209Replies
- 2452Views
-
16
Following