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!
210 replies
-
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!
-
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
-
regarding your comments above:
1. I'm not sure how we'd go about doing that right now. If we knew which Ninox CSS class is responsible for setting the row height of a View table element, it'd be pretty straightforward to change it. might be able to help you out with that.
2. This is more of a Ninox thing. As a general rule, if you want to use the mouse wheel to scroll down the page, it's better to set the cursor to the end right of the screen. That way, you avoid the cursor passing over a scrollable or zoomable section that would interrupt the page scrolling. We just need to get used to dealing with nested scroll bars.
-
Hi Sotirios. I'm trying to adapt this but this error appears, any ideas?
-
Hi,
To modify the code for you, I need to know the following:
- The 'name' of the table
- The 'name' and 'type' of each field you'd like to add data
- The 'ID' of one field for which you'd like to prevent duplicates (the widget currently supports checking for only one field).
-
Send you the dummy database.
-
Hi, I've attached the database for you to try out.
-
Thanks Sotirios appreciate a lot your time.
Works perfect
-
-
said:
1. I'm not sure how we'd go about doing that right now. If we knew which Ninox CSS class is responsible for setting the row height of a View table element, it'd be pretty straightforward to change it. Sean might be able to help you out with that.I don't want anyone getting their hopes up. I think it's more complicated than just changing some CSS.
you can start with these classes... t-rowhead, t-row, t-selection-row-head and t-selection-row.
-
Hi, it looks like some things are easier to create from scratch, like an HTML view table than trying to hack a native one!
-
Agreed
-
-
Well I live in hope that Ninox will apply the row sizing to standard views. Not a dire requirement but would be nice to have!
-
Is there a way to enter data in batches, for example I need to enter 5 documents without the dialog box having to enter them one by one?
Content aside
-
8
Likes
- 12 days agoLast active
- 210Replies
- 2554Views
-
16
Following