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!
73 replies
-
Version 7.1
Map improvements:
On mouse hover, the marker displays a tooltip with the first and last name of the corresponding 'Account' record.
On mouse click, the corresponding 'Account' record popups.
Have fun!
-
Version 7.2
Map improvements:
Hey there! You can now add some gorgeous custom icons to your map! Have fun finding or making your favorite icon and save it inside the Dashboard Photos subtable. Then, create a sharing URL and paste it into the respective code field.
Enjoy!
-
I accidentally refreshed and found another update! Sotirios Zormpas resolves issues faster than I can raise them. Sorry, Iβm back with another question.
I noticed that the location within the China region seems to have some offset in the actual positioning (as shown in the video). How can this be addressed, my friend? So far, this issue has only been observed on the iPhone.
-
-
Hi, I am experiencing the same issue when opening the Dashboard using the Ninox app on my iPhone.
Interestingly, when I use the web app on my iPhone via Safari or Chrome, everything works perfectly.
It seems that the problem is related to the native Ninox app. I'd like to know if you can check if the same behavior also occurs on Android phones (I don't have one).
The good news is that we can access the Dashboard on the iPhone via the web app, which, I can say, for my taste, looks better than the native app.
-
hi Sotirios in which version do you have the problem ? And what is the problem ? I have Android phone and tablets,on tablets all work perfect
-
Hi, I think I might have identified the issue. My iPhone is using a map service from a Chinese provider, which calculates latitude and longitude differently than Google or other map services, resulting in coordinate discrepancies. If Ninox on the iPhone were to use Apple Maps directly, there might not be any problem. -
Hi, could you please download the latest version 7.2, and check if the map markers work as they should on your Android phone and table?
-
yes I place my address and perfect
-
That's great, thank you for testing!
-
-
said:
Then, create a sharing URL and paste it into the respective code field.How to create shared links?
-
To share the file, just open the 'Red Marker' record of the 'Photos' table and click 'Share this file...' from the menu-burger icon. I'll be back soon with something even better!
-
-
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!
-
this is so cool~~
-
this is so awesome!!
thank you very much for sharing your dashboard version - I like it a lot especially the map. I took a look at the v7.2 where icons are used ( somehow I didnt get it adapted), but I like v7.3 much better and it worked for me. I have a question about the map - I wonder if its possible to use different icons instead of the circles?
thanks a lot
Kruna
-
Welcome Kruna. Yes the Map is excelent.
-
Hi there!
I'm so happy you like it! I've prepared a special edition for you, version 7.3 with custom icons instead of circles. I hope this is what you're looking for!
-
omg, this is absolutely amazing! I am impressed and overhelmed, incredible.
This is exactly what I was looking for, thank you so much for taking the time to recreate the database. I've never been in a forum where people are so kind and ready to help at any time.
Χίλια Ξ΅Ο ΟΞ±ΟΞΉΟΟΟ
Kruna
-
you're more than welcome!
Just a quick note: the leaflet library pulls the icon from a shared URL link, as you'll see in the code. It's important to create your own shared URL links for the icon markers you'll use in your database.
-
About your quick note - did you read my mind?
I was about to ask about the shared URL link, but then it worked somehow.But still I would like to understand the use of shared link as I thought its only one link to share, but it is not like that right?
Your link shows the icons and when I entered my link the icons also showed up and when I click 'Share this file...' from the menu-burger icon its always a different shared link. So once I use a shared link I shouldnt 'generate' another one - is that right too?
Another question comes up into my mind - is it possible to share this map with clients even though they dont have ninox? I guess its surely required, but maybe there is another way.
Thanks for your help.
Cheers Kruna
-
Hi, in this setup, there are four public URL links. There's one for each of the red, green and blue icon markers and one for the common shadow icon, as shown below:
var redIcon = new LeafIcon({iconUrl: 'https://share.ninox.com/9kdnfo84wtpootgow6px1g3golu874l9i9ec'}), greenIcon = new LeafIcon({iconUrl: 'https://share.ninox.com/1jiqvo5pdsato3qmazp5h5nfodnbs2us9n3f'}), blueIcon = new LeafIcon({iconUrl: 'https://share.ninox.com/k0670kbjvl6nzc2xhpjw2zjjq5j6hbjqyns0'});shadowUrl: 'https://share.ninox.com/lq774ccvc9kw89w699n20ea95ho2o2bqbpt0'As a general rule, you can put the custom icon files in the same directory as leaflet.css or in a valid URL. When it comes to Ninox, the only option is to use URLs.
So, how can we create these URLs inside Ninox? The first thing you need to do is save each icon file as an image. Then, just use the 'Share this file...' option to create a public, shareable URL like the one above.
You only need to create these links once. As long as you don't delete the files, the links will stay valid. Just a heads-up: if you delete the original database and import it again, you'll need to repeat the above process.
You also asked if it's possible to share the map with clients even if they don't have Ninox. Could you give us a bit more info on how you'd like this to work?
-
hi,
I noticed that this website also uses the open-source map you shared. Iβm very interested in the red area feature displayed on the map. Can this be used in this great database? Thank you. -
ok, thank you very much for your explanation - understood now!
Well, I wonder if I can provide kind of (shared)link like in google maps, so clients can see the map too. On the other hand they would need ninox to see the records when clicking on iconcs, so I guess I would need to buy licenses for clients and that wouldnt be worth it , so I will need to stay with google maps.
-
Hi there!
I just wanted to let you know that this map display is called a choropleth map. The great news is that you can implement it with Leaflet!
I've included some useful links below to help you get started if you want to create this kind of map:
-
Thank you for your help.
Content aside
-
7
Likes
- 2 hrs agoLast active
- 73Replies
- 875Views
-
9
Following