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
-
Hi works perfect on Chrome and Firefox on Android Tablet
-
Can the four charts be configured to provide a constant, real-time display of numerical data?
-
Hi, yes it can, I will present some real sample data in the upcoming releases!
-
-
-
this is nice. We can get the data in a table as well in this presentation, however my doubt still remains about the vertical sidebar layout. You have shown how we can successfully implement the buttons sidebar nd the charts on the right side.
The only problem with that layout is that it looks like the whole individual CSS grid that we make still goes into one of the columns of the internal column layout of the Ninox design editor. That's why we cannot nave varied size columns. It picks up the largest height column and then aligns everything according to that height.
I was just thinking if there was a way to have varied cell/column heights for internal Ninox column system or if we could just fit the CSS grid with varied cell heights on the right side, we can create the desired layout for the dashboard. I have already started studying the CSS grid.
The point is that Ninox allows horizontal layouts and it's easy to layout the components in that way. We should give them feedback to maybe its time for them to change their layout system to a better one (CSS Grid).
Also regarding the charts, I was thinking that these charts are all using an external JS library that loads in the beginning. Aren't we supposed to use the internal charts view of Ninox ? Can we use the internal Charts and fit them into the CSS grid within the formula box?
-
Hi,
we could convert a Ninox Form into a CSS grid container.
As a proof of concept create a new Page and then insert the following code inside a function field. Then try to add Ninox buttons to see what happens:
html("<head> <style> .form{ width:100%; height:100%; display: grid; gap: 0px 0px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } </style> </head>") -
Hi, I have already started learning the CSS grid and this is what I have made so far. I have defined "form" as the main Div in HTML and made other Divs as its child. I can't understand whether should I define "form" as the main Div or not 'cuz it is showing the form border twice.
If I don't make "form" as the main Div, but name the main Div as "container" in HTML, the whole layout breaks.
I have attached a snapshot (with broken layout where the main Div is named as "container" instead of "form" and the actual Ninox file (with desired layout where the main Div is named as "form").
I have also attached the screenshot of the Visual Studio file where I am learning and practising the CSS grid layout system.
-
-
Dashboard Template project major update (v4):
- Elimination of the padding of the parent Ninox form. The buttons stick to the top of the form just below the Ninox Tab creating a sticky ribbon.
- New text-line section dividers have been introduced.
- The scroll-margin-top property of all section dividers has been set to 98px. By controlling the distance between the snap position of the section divider and the parent Ninox form, the former sits perfectly just below the buttons after scrolling.
- A new sticky scroll-up arrow has been added. Always visible the clickable arrow lets the users easily return to the top of the form.
With the above refinements, the basic structure of the dashboard is complete. It's a long, multi-section dashboard. There is a ribbon of ten buttons corresponding to the ten sections.
Between section dividers, the users can add as many Ninox fields as they want. Bear in mind that each time you insert a new Ninox field into the dashboard you must manually increase the id number of the scroll-up arrow accordingly in the following line of code:
.form .component:nth-child(14)Enjoy!
-
Version 4.1
Bug fix: On Chrome the "scroll-margin-top" property does not work. To fix this I had to use the alternative "scroll-padding-top" property that applies to the <div> where the vertical scroll bar appears. I discovered that this is the parent <div> with the class '.page-view>.object'
I tested it in Safari, Chrome, and Firefox. It runs smoothly.
PS. I wouldn't have had the courage to open my browser's developer console to explore the Ninox page <div> elements without 's encouragement.
-
Excelent now on Chrome and Android Tablet Perfect
<script type='text/javascript'> setTimeout(function(){ echarts.registerTheme('customed', {}); var myChart = echarts.init(document.getElementById('" + chartId + "'),'customed'); myChart.setOption(" + options + "); },1000); </script>"In my case the Graph is too much better place 1000 display faster than 100
-
thanks, I also noticed some problems with the initial appearance of the charts. I'll try the setting you suggest!
-
-
Version 5.0
I have imported this dataset from Kaggle to demonstrate how we can visualize our Ninox data using the eCharts library.
The new eCharts 'dataset' component has been adopted because it is convenient for separating data from configs and is easy to construct as an 'array of JSON' within the Ninox script.
The legends are interactive, allowing you to click to hide/show the relevant series data.
Although there is an initial steep learning curve, once you understand the basics of the chart components, the possibilities are endless, even for statistical analysis. I recommend the eCharts Handbook as a starting point.
BONUS: A beautiful real-time analog clock, which is essentially a gauge chart that displays time data, for those who love clocks!
Have fun!
-
Thanks for sharing this piece of art!
-
Version 6.0
New feature:
Real-time weather data right to your home section by calling the tomorrow.io API. I've set the location to New York just to show you what it looks like! You can easily change the location 'Value' field inside the 'Settings' subtable. It accepts the following formats:
- Latitude and Longitude (Decimal degree)
location=42.3478, -71.0466 - City name
location=new york - US zip
location=10001 US(2-letter code based on ISO-3166) - UK postcode
location=SW1
I'm happy to leave my API Key so that everyone has a chance to test out the service. Just a quick heads-up, though, there are limits on requests (3/sec, 25/hour, 500/day). But there is a free account tier, so just create one and paste your API Key inside the 'Settings' subtable.
This company seems promising but I am not sure how accurate the results we get are. If you know of a better weather API, I'd love to hear about it!
Improvements:
- Responsive layout for both the 'Home' CSS flexbox and 'Dog Stats' CSS grid. I used @media CSS queries to make it all work together seamlessly. On smaller devices, the layouts switch to a single column, which is great for viewing the charts one after the other.
- No dependencies on external sources. I've downloaded and saved the eCharts js library, the Phosphor icons stylesheet, and the weather codes into the 'Sources' subtable for you.
All the best!
- Latitude and Longitude (Decimal degree)
-
Version 7.0
Maps:
Hello everyone,
I'm really happy to share the latest version of Dashboard with you because I've incorporated a feature that I'm so excited about and I hope you'll love it too! The ability to display dynamic maps within Ninox is something many of us have been asking for and I'm so pleased to present the leaflet.
The Leaflet is a well-known, mature, super lightweight JavaScript mapping library with an active community. It's open-source and it gives us the power to do amazing things like add markers, popups, overlay lines, and shapes, use multiple layers, zoom, pan, and so much more. You can find plenty of examples in this free online book. As you can see in the screenshot, the map automatically shows markers for each address in the 'Accounts' table (on click, a nice popup appears that displays the Name).
Leaflet doesn't provide maps, but don't worry! It's provider-agnostic, which means you can easily call a map tiles API to get the map you need. Of course, you can use the OpenStreetMap API, which is completely free and open-source. Their maps are raw (precision but not neat), but they're great!
I've been looking into this a bit, and I've found two companies that might be worth checking out: Stadia Maps and MapTiler. I'm going with the Alidade Smooth-style map from Stadia Maps. I just love its muted color scheme and fewer points of interest, which makes it ideal for data presentation. If you want to use any of their maps, create a free account and copy their API call URL (including your API key) inside the 'Settings' subtable. I'll leave my API key for now, so you can see how it works.
I was wondering if you think it might be worth trying to download the library and make it work from the Ninox backend. I gave it a go myself, but I couldn't get it to work. Maybe the issue has to do with some icons that are used by the library, but I'm not sure how to modify the code to access them from a Ninox shared link. I've noticed that the Leaflet map hides the option wrench of the parent Ninox element, which we could probably fix by downloading the library and modifying the z-index values. Either way, it's not a big deal, but I'd love to hear your thoughts!
I've already centred the map on Madrid for you, so you can easily test it! Let me know if there's anything else I can help with.
could this particular implementation meet your needs in China as well?
I saw your earlier post about using Google Maps with multiple markers. I was just wondering if you think Leaflet could be a cheaper alternative that's also functional and powerful. I'd love to hear your thoughts!
Enjoy!
-
This is an amazing piece of work! Thank you to for all your contributions. Here are a few issues I've encountered, and I hope addressing them will make things even better.
- In a previous map case, I considered whether clicking on a marker on the map could pop up the corresponding entry in the table, which would be more intuitive. However, I haven't been able to achieve this yet.
- I noticed that there are images of marker icons in the Photos table. Does this mean I can customize the color of the marker icons displayed on the map? I couldn't find the relevant code, so I'm wondering if multi-colored marker icons can be implemented.
- After entering the database, I occasionally encounter the following prompt (shown in the image). What could be the cause of this issue?
Thank you again.
-
Hi,
Regarding your 3rd point, It looks like Ninox is getting an error response when it calls the weather API. There are rate limits, so just a friendly reminder to get your own API key and replace mine within the 'Settings' subtable if you haven't already done it.
I think the first two points are doable with the leaflet, at least I'll give it a go!
-
Thank you for your reminder, and thank you for your dedication.
-
Content aside
-
7
Likes
- 6 hrs agoLast active
- 85Replies
- 919Views
-
9
Following