8

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!

177 replies

null
    • szormpas
    • 1 mth ago
    • Reported - view

    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! 🙂

      • szormpas
      • 1 mth ago
      • Reported - view

       Appreciate the feedback! Happy to help and be part of such a great community.

      • szormpas
      • 1 mth ago
      • Reported - view

        Hi, The attached calendar is from your Android tablet? Would you like to see it in a Ninox date field too?

      • Rafael Sanchis
      • Rafael_Sanchis
      • 1 mth ago
      • Reported - view

       

      Yes is in Android Tablet (Galaxy Tab Ultra). And yes I would like to see it in a Ninox date field.

      • Rafael Sanchis
      • Rafael_Sanchis
      • 1 mth ago
      • Reported - view

       

      Upsss too different on web version.

      • szormpas
      • 1 mth ago
      • Reported - view

        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'.

      • gold_cat
      • 1 mth ago
      • Reported - view

       Thanks for giving and I encountered this mistake when I submitted it

      • szormpas
      • 1 mth ago
      • Reported - view

        Hi there, have you added your Ninox API Key to the 'Settings' Table?

      • gold_cat
      • 1 mth ago
      • Reported - view

       I forgot this step, thank you

    • Mel_Charles
    • 1 mth ago
    • Reported - view

    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 !

      • szormpas
      • 1 mth ago
      • Reported - view

        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! 😊

    • Mel_Charles
    • 1 mth ago
    • Reported - view

     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

      • szormpas
      • 1 mth ago
      • Reported - view

        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.

      • Rafael Sanchis
      • Rafael_Sanchis
      • 1 mth ago
      • Reported - view

       

      Hi Sotirios. I'm trying to adapt this but this error appears, any ideas?

      • szormpas
      • 1 mth ago
      • Reported - view

       Hi,

      To modify the code for you, I need to know the following:

      1. The 'name' of the table
      2. The 'name' and 'type' of each field you'd like to add data
      3. The 'ID' of one field for which you'd like to prevent duplicates (the widget currently supports checking for only one field).
      • Rafael Sanchis
      • Rafael_Sanchis
      • 1 mth ago
      • Reported - view

       Send you the dummy database.

      • szormpas
      • 1 mth ago
      • Reported - view

        Hi, I've attached the database for you to try out.

      • Rafael Sanchis
      • Rafael_Sanchis
      • 1 mth ago
      • Reported - view

       

      Thanks Sotirios appreciate a lot your time. 👍 Works perfect

    • Sean
    • 1 mth ago
    • Reported - view
     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.

      • szormpas
      • 1 mth ago
      • Reported - view

        Hi, it looks like some things are easier to create from scratch, like an HTML view table than trying to hack a native one!

      • Sean
      • 1 mth ago
      • Reported - view

        Agreed 😁

    • Mel_Charles
    • 1 mth ago
    • Reported - view

    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!

    • Rafael Sanchis
    • Rafael_Sanchis
    • 3 wk ago
    • Reported - view

     

    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?

      • szormpas
      • 3 wk ago
      • Reported - view

        Hi,

      Can you give me a bit more info on what you mean by "enter data in batches"?

      Do you mean programmatically or by adding the documents one after the other using the Widget but without the confirmation dialog?

      • Rafael Sanchis
      • Rafael_Sanchis
      • 3 wk ago
      • Reported - view

       

      Hi Sotirios.  Adding the Documents one after the other in the same Widget, 

      Add the fitst data, next save and place the widget empty again, add then next and next to finish click Cancel

      • szormpas
      • 3 wk ago
      • Reported - view

        Hi,

      I've attached a version of the Form Widget without the confirmation message.

      To be honest, this was my original plan. Unfortunately, there's a small annoying bug. When you first save a record, the Ninox page refreshes, which closes the widget. This doesn't happen on subsequent saves.

      I've tried to fix it, but I haven't been able to. I think it's related to the Fetch API. I wish someone with JavaScript expertise could help us.

Content aside

  • 8 Likes
  • 5 days agoLast active
  • 177Replies
  • 1740Views
  • 12 Following