8

Dashboard Template

Dashboard_v3.ninox

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!

198 replies

null
    • szormpas
    • 1 mth ago
    • Reported - view

    Version 10.0

    View Widget

    Hello everyone,

     recently mentioned he'd like to be able to change the height of the rows in the View element on the fly.  and I agreed that it'd be easier to build from scratch than try to modify the Ninox code. 

    Building a View component from scratch is no easy task, so I decided to go with a ready-made library. 

    After doing a lot of research, I opted for Ag-Grid. They claim to be the best JavaScript grid in the world, and my experience has been great so far.

    My goal was to build a Widget that could completely replace Ninox's native View element and, if possible, have more functionality.

    I'm happy to present my View Widget with the following features:

    • Add a new record inline using the pinned top row.
    • Select and delete one or more records.
    • Modify any cell inline.
    • Row indexing.
    • Intuitive sort and filter capabilities (simply click on the column header to sort).
    • Pagination.
    • Extensive customization (try the Theme Builder).
    • Compact or normal mode.

    The all-new View Widget is basically a Ninox table inside a formula field, plus a whole lot more.

      what are your thoughts on the compact mode? Is it as compact as you'd like?

    Enjoy! 🙂

    Dashboard_v10_0.ninox
      • szormpas
      • 1 mth ago
      • Reported - view

        , Great work on the date comparator! It's working perfectly. I checked it out and it does exactly what we need.

      Many thanks for your contribution 💪

      • Kruna
      • 1 mth ago
      • Reported - view

       ok, no problem.

      Iam also using the public cloud, except on desktop, but Not the browser.

      Anyway, maybe there is a solution somewhere in the www - I will just have to look for it😅

      • gold_cat
      • 3 wk ago
      • Reported - view

      Hi friend, can Ag-Grid be used offline without using the API? Does the code need to be modified?

      • szormpas
      • 3 wk ago
      • Reported - view

        Hi, you only need the Ninox API to add a new record or modify an existing one.

      • gold_cat
      • 3 wk ago
      • Reported - view

       Hi, friend! If I use the offline version, do I also need the API?

    • szormpas
    • 1 mth ago
    • Reported - view

    Hi, following the discussion here, I just wanted to remind you that you need to be careful when sharing the Ninox API Key with the Ninox frontend (client-side).

    If you're the only user of your application, then it's probably fine. Otherwise, you should be aware that someone else using your application could potentially access your Ninox API Key.

    • cyan_silver
    • 3 wk ago
    • Reported - view

    We are a construction management company, and we do quality management for construction projects. I would like to ask you if there is a way to read the picture data in NINOX if you use an IPAD to work offline when there is no Internet at the construction site. At the end of the day The picture will not be blank (I modified the use case of Figure 1 to Figure 2, hoping that the base map can support the offline function to avoid becoming the situation of Figure 3 in the offline state) Thank you

      • szormpas
      • 2 wk ago
      • Reported - view

        Hi, in my example the floor plan is saved into an image field inside the Photos subtable. I'm not sure how Ninox handles files in image fields when you're offline. If you can open an image field offline, you should be able to see the base map using the Leaflet library. I don't use my database offline, so I can't help you further.

    • szormpas
    • 2 wk ago
    • Reported - view

    Version 11.0

    Floating Widget

    Hello everyone,

    Tooltips and popovers are really useful and they make a massive difference to the user experience.

    While it's pretty straightforward to create a floating element with CSS, positioning it in relation to other DOM elements can be tricky.

    Luckily, there's a great low-level library called Floating UI that helps us position floating elements such as tooltips and popovers perfectly.

    The new Floating Widget makes it super easy to add tooltips and popovers to your Ninox dashboard. I've kept the CDN links in place, so you can just copy and paste the code into a function field and you're all set.

    To see what the library can do, move the buttons to the edges of the viewport and watch how the floating elements move around.

    Have fun! 🙂

    Dashboard_v11_0.ninox
      • szormpas
      • 2 wk ago
      • Reported - view

         I just wanted to share something I found out today, building on what I said in my last post.

      There's a new Popover API that's now available in all three major browser engines. It's a game-changer! It's now baseline, and it's newly available as of April 16, 2024.

      With this native web feature, we can create floating user interface elements and avoid common issues related to z-index stacking, dismissals, poorly implemented accessibility, and more.

      It's really straightforward to create a popover with this API. Just copy and paste the following code into a formula field and you'll see what I mean:

      html("<style>
.floating-button {
    padding: 10px 20px;
    font-size: 14px;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
[popover] {
    width: max-content;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: opacity 0.2s ease;
}
</style>
<button class='floating-button' popovertarget='popover' popovertargetaction='toggle'>Click me</button>
<div id='popover' popover>
    <h2>Text</h2>
    <textarea rows='6' cols='50' placeholder='I am a popover built using the all-new native popover web API. I have got built-in accessibility features and toggle control, so I am a great way to build intuitive and dynamic interfaces...'></textarea>
    <button class='floating-button' style='float: right; margin-top: 10px;' popovertarget='popover' popovertargetaction='hide' onclick='saveText();'>Add</button>
</div>
<script>
function saveText() {
    // add logic here
};
</script>")

      The Popover API puts the floating element in the centre of the viewport by default. If you want to position the popover relative to the button, you can combine it with the Floating UI library like I did in the attached Dashboard_v11_1.

      There's more good news: the CSS Anchor Positioning API is on its way! Soon, we won't need a single line of JavaScript to perfectly position our popovers relative to an anchor element (e.g. button). Unfortunately, it isn't supported on all browsers yet, but you can explore its features here:

      Enjoy! 🙂

      Dashboard_v11_1.ninox
      • szormpas
      • 2 wk ago
      • Reported - view

        

      I'm happy to report that Ι've found a way to use the new Floating Widget to display custom tooltips for all Ninox fields!

      We all know that the Ninox native tooltips are pretty basic, lack customisation and are really slow. On the other hand, the new ones have some great features:

      • Quick show/hide on mouse hovering.
      • Fully customisable.
      • Show any data from your Ninox database.

      To make this happen, I've followed these steps:

      1. I used the Ninox classes ".form" and ".component:nth-child( )" to identify the target Ninox field.
      2. I built a tooltip with the Popover API.
      3. I've got the tooltip positioned perfectly in the Ninox field using the Floating UI library.

      If you're ready to give custom tooltips a try, just pop the following code into a formula field:

      html("<head>
<style>
.tooltip {
    width: max-content;
    max-width: 300px;
    background: #2D313B;
     color: white;
     font-weight: 600;
    padding: 10px;
    border-radius: 4px;
    font-size: 14px;
}
</style>
</head>
<body>
<script src='https://cdn.jsdelivr.net/npm/@floating-ui/core@1.6.8'></script>
<script src='https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.6.12'></script>
<div id='tooltip-3' class='tooltip' popover>
I am a custom tooltip attached to this Ninox text field. I am powered by the Popover API and the Floating UI library, so I am fully customisable, move around based on the space I have, follow the element as it moves, and adjust to fit within the viewport.
</div>
<script>
setTimeout(function(){
const ninoxTextEl03 = document.querySelector('.form .component:nth-child(26)');
const tooltipEl03 = document.getElementById('tooltip-3');
ninoxTextEl03.addEventListener('mouseenter', function() {
    tooltipEl03.style.position = 'absolute';
    tooltipEl03.style.inset = 'unset';
    tooltipPositionUpdate(ninoxTextEl03, tooltipEl03);
    tooltipEl03.showPopover();
});
ninoxTextEl03.addEventListener('mouseleave', function() {
    tooltipEl03.hidePopover();
});
function tooltipPositionUpdate(element, tooltip) {
FloatingUIDOM.computePosition(element, tooltip, {
    placement: 'bottom-start',
    middleware: [FloatingUIDOM.offset(0), FloatingUIDOM.flip(), FloatingUIDOM.shift({padding: 5})],
}).then(({x, y}) => {
    Object.assign(tooltip.style, {
        left: `${x}px`,
        top: `${y}px`,
      });
  });
};
},100);
</script>
</body>")

      Then just replace the number '26' in code line 23 with the ascending index of your Ninox field and you're good to go!

      If you want to make the formula field invisible, just set the background and border color to transparent.

      Enjoy! 🙂

      Dashboard_v11_2.ninox
      • szormpas
      • 10 days ago
      • Reported - view

       

      I was inspired by this post and thought I'd create another cool implementation of the Floating Widget.

      It's a custom To-Do List based on local storage.

      You can add, mark as done or delete each item of the list.

      Happy coding in Ninox! 🙂

      Dashboard_v11_3.ninox
      • Rafael Sanchis
      • Rafael_Sanchis
      • 8 days ago
      • Reported - view

       

      Hi Sotirios, now can I sort the Rev A, but when I try to sort by Rev B and Rev 0 no way. There are any way ? and where 

      Thanks

      • szormpas
      • 8 days ago
      • Reported - view

        Hi,

      I'm not sure how we can sort on two fields at once, so we'll have to check the Ag-Grid documentation.

      • Sabine
      • 6 days ago
      • Reported - view

       Hallo alle zusammen. Ich habe diesen Chatverlauf gelesen und eine Frage: Ich suche in Ninox eine Programmierung für einen Kalender mit mindestens 5 Spalten für je 1 Mitarbeiter. Leider kann ich das nicht selbst programmieren. Ich habe bereits eine Datenbank für meine Kunden, die auch super funktioniert. Jetzt benötige ich noch das Kalenderprogramm. Es sollte die Möglichkeit haben auf täglich, wöchentlich und monatlich umzuschalten. Ich stelle mir  die Darstellungen so wie im Microsoft 365 vor (siehe Bild). Da ich alles auf Ninox erledige, wäre auch das Kalenderprogramm sinnvoll, bzw. vielleicht kann man den Kalender von Microsoft 365 (Outlook) in ein Ninox-Programm einbinden. Wer kann mir da helfen. Danke für Eure Antworten. Grüße, Oswald.

      Hello everyone. I have read this chat and have a question: I am looking for a calendar programming in Ninox with at least 5 columns for each employee. Unfortunately, I cannot program it myself. I already have a database for my customers, which works great. Now I need the calendar program. It should have the option to switch between daily, weekly, and monthly views. I imagine the displays to be like in Microsoft 365 (see picture). Since I do everything in Ninox, the calendar program would also make sense, or maybe the Microsoft 365 (Outlook) calendar can be integrated into a Ninox program. Who can help me with this? Thank you for your answers. Best Regards, Oswald.

      Screenshot 2024-11-27 102243 Screenshot 2024-11-27 102210
      • szormpas
      • 6 days ago
      • Reported - view

        Hi, 

      You might find it helpful to add a custom calendar to your database using the Full Calendar JavaScript library. You can download my latest Dashboard Template (version 11.3) to see how this can be done.

      The core of this library is open source and free to use. You can create as many calendars as you need, for example, one for each employee.

      If you want a calendar with your employees displayed as vertical columns, you'll need to purchase the Resource Time Grid premium plugin. You can see a demo here.

      • Sabine
      • 5 days ago
      • Reported - view

       Hello Satirios, thanks for the info. But in your calendar I only have 1 column to view in the day view. Unfortunately I don't know much about programming. Can you help me create a calendar? As I said, I need 5 columns (1 column for each employee). The calendar doesn't have to have any special features, I just want to be able to enter and move appointments. No other links or connections. Thanks for your answer. (As shown in the pictures). The AI wrote me the following text, but I can't get any further with that either. Best regards. Oswald

      Screenshot 2024-11-28 101951
      • szormpas
      • 5 days ago
      • Reported - view

        Hi,

      I'll try to include this functionality (resource Time Grid) in the next version of the Dashboard Template, but I've got some business commitments that might mean it'll take a little while.

      • Sabine
      • 5 days ago
      • Reported - view

       Danke für die Antwort. Ich warte auf Ihre neue Version. Grüße. Oswald

      • Kruna
      • 5 days ago
      • Reported - view

       hallo, I was helping somebody to achieve something similar. Its Not a calendar, but would work like one on a daily base. If you are interested, pls leave your email and I can help you adjust the dB to your needs.

    • szormpas
    • 5 days ago
    • Reported - view

    Version 11.4

    View Widget enhancements

    Hello everyone,

    I've implemented two new features:

    1. It's possible to render an image in a cell.
    2. There's a new Button you can use to open one or more selected rows.

    I'd like to thank     for the contribution.

    Have fun! 🙂

    Dashboard_v11_4.ninox
      • Rafael Sanchis
      • Rafael_Sanchis
      • 4 days ago
      • Reported - view

       

      👍 Simple example on my PlayGames DB.

      The only problem is that every time open the Widget the Column cover move to the last column.

      • szormpas
      • 4 days ago
      • Reported - view

        Hi,

      according to the Ag Grid :

      Maintain Column Order 

      When providing new Column Definitions to the grid, the order in which they are provided is the order in which the columns are displayed. This can mean that when overwriting columns with a new set of columns, any columns moved by the user will have their position reset.

      If you instead want to prioritise the order of the columns as they appear in the grid, set the grid property maintainColumnOrder to true.

Login to reply

Content aside

  • 8 Likes
  • 4 days agoLast active
  • 198Replies
  • 2247Views
  • 15 Following