0

CSS hacks for UI design

Total Corporate Solution.ninox

Hello  I have been following your posts regarding the CSS hacks for UI design in Ninox. I was feeling really helpless until a few community members advised about your posts for tweaking the design editor using CSS.

I am trying to design a particular type of Home Screen/Dashboard that I saw in Filemaker. It is a screen that involves Vertical alignment of the buttons (screenshot attached). Following your posts I was able to achieve the result but to a little bit. I also came across one of the posts from @jess_spiers from 2 years ago (https://forum.ninox.com/t/35hrzfd#p8hr035) where he was able to design his screen on the same concept as mine (screenshot attached).

I want to design my dashboard like the one above and show charts on the right side instead of the Table view. The GREEN label on the screen is not aligned properly with other elements ('cuz its label is hidden. It is a formula field).

Can we nudge it down a little bit using CSS to align it vertically with other elements like the text boxes and choice fields etc?

Is it possible in CSS to increase or decrease the size of individual columns in the grid, 'cuz I believe it picks up the largest column and then starts aligning the rest of the elements in that row according to that largest column. That is why when I increase the height of the Space element, the SALES and INVOICES buttons also move down.

Can you please help me with the CSS that will help me design the screen the way I desire.

26 replies

null
    • Sean
    • 3 mths ago
    • Reported - view

    Hi

    I will look at it today and see what I can do.

      • Database App Developer
      • vermau81
      • 3 mths ago
      • Reported - view

       Thank you for your support...

    • Sean
    • 3 mths ago
    • Reported - view
     said:
    I want to design my dashboard like the one above and show charts on the right side instead of the Table view.

     I don't have any experience with charts. If you can add them to your form I'll see what I can do.

     said:
    I want to design my dashboard like the one above and show charts on the right side instead of the Table view. The GREEN label on the screen is not aligned properly with other elements ('cuz its label is hidden. It is a formula field).
    Can we nudge it down a little bit using CSS to align it vertically with other elements like the text boxes and choice fields etc?

    Yes, that was easy enough. First, add a border to the field using the Style popup for the Formula field. You can make it the same color as the background color and also choose Border style Solid. I added this line of CSS to push it down.

    .form .component:nth-child(7) {padding: 28px 8px 8px;}

    I'm still looking into using CSS Grid in Ninox's Form view, but it may take a few days.

    • szormpas
    • 3 mths ago
    • Reported - view

     Hi,

    Looking for a way to help you copy the original design of the Filemaker Dashboard, I think I can share a first draft of my efforts.

    As you can see in the attached database, the implementation is based on just two formula fields, one for the buttons on the left and one for the graphs on the right.

    Simple, nice and functional!

    What do you think, is it close to what you want?
     

    Dashboard.ninox
      • Database App Developer
      • vermau81
      • 3 mths ago
      • Reported - view

       This is amazing my friend. I thought that I will have to give up as I would never be able to achieve this in Ninox until Ninox make some enhancements to their design editor. I hope that Ninox will definitely one day bring their design editor to the level of modern day pixel perfect design editors (maybe they will start using some better grid solutions if they want to stay with the web based UI or they might want to build a truly native macOS app in SwiftUI).

      I believe it is all about perceptions and with the kind of tools we have grown up.Even since I started learning to code (starting from Foxpro 2.5 in 1999 to Visual Basic .Net and C# in 2013 and then SwiftUI in 2014), I have always worked with tools that provide the flexibility and power to create the UI you want. This was the first time I have come across a tool that works a bit differently in terms of UI design and principles.

      But in the end I would like to admit that one can create database and business solutions much faster in Ninox as compared to any other equivalent tool in the market like Filemaker. I have been able to create a simple working model of CRM for my office (a manufacturing company) in just 2 days and the sales team has already started using it while I develop it live along with being busy with other stuff in the office. Which means that I am developing the CRM with just 40% of my attention and involvement in the development while I am in the office and still it has already gone live.

      I am going to stick to Ninox and change my way of thinking and adapt it to the way Ninox works ('cuz I do not work with the other tools anymore so I can't stick to their ideology anymore).

      Once again, thank you mate for your help.. I will study your project and try to build upon to and seek your help further if required. Hope you won't mind :)

      Regards,

      Vermaji

      ---------------------------------

      • szormpas
      • 3 mths ago
      • Reported - view

       Hello!

      I'm glad you've finally decided to give Ninox a second chance, and I'm happy to contribute to the development of your dashboard in any way I can! 🙂

      To make the above design a reality, I have creatively combined the knowledge gained from the following threads:

      Best wishes

      • Database App Developer
      • vermau81
      • 3 mths ago
      • Reported - view

        Thank you all for your support and guidance till now and whenever I needed it. I can see that Ninox has a very helpful and considerate community of members and I am glad to be a part of this community.

      i hope that some day I can also be of some help to someone when I become a veteran in Ninox just like you guys..

      Regards,

      • gold_cat
      • 3 mths ago
      • Reported - view

       Thank you for your excellent sharing.

    • szormpas
    • 3 mths ago
    • Reported - view

    Minor improvements:

    • The parent containers of both Charts and Buttons are CSS grids. Now the buttons are perfectly aligned with equal spacing between them.
    • More tabs have been added to mimic the original Filemaker template. You can now change the background color of the tabs for a consistent blend.
    • The function loadeCharts() is only called once, which improves the loading time of the eCharts js library.
    Dashboard_v2.ninox
      • Rafael Sanchis
      • Rafael_Sanchis
      • 3 mths ago
      • Reported - view

       

      Each button can work independently with one click ?

      • szormpas
      • 3 mths ago
      • Reported - view

       Hi,

      Sure, all the buttons can be clicked independently.

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

       

      Hi Sotirios I try this add a click but don't work, some idea.

      <body>
      <div class='button-grid-container'>
        <button id ='button1'>
        <button1 onclick = closeAllRecords(); openRecord(last(select 'Dashboard1'>
          <span class='ph-thin ph-users-three'></span>
          Accounts
        </button>

      • red_kite
      • 3 mths ago
      • Reported - view

      In line 4 you must try

      <button1 onclick=ui.closeAllRecords();ui.openRecord('{ last(select Dashboard1) }')>
      • Rafael Sanchis
      • Rafael_Sanchis
      • 3 mths ago
      • Reported - view

       

      Hi MZ, thanks but don't work

      <body>
<div class='button-grid-container'>
  <button id ='button1'>
    <span class='ph-thin ph-users-three'></span>
    <button1 onclick=ui.closeAllRecords();ui.openRecord('{ last(select Dashboard1) }')>
    Dashboard
  </button>
      • szormpas
      • 3 mths ago
      • Reported - view

        Hi,

      For the first button can you try the following?

      <button id='button1' onclick=""ui.popupRecord('" + raw(last(select Dashboard1).Id) + "')"">
<span class='ph-thin ph-users-three'></span>Accounts</button>
      • Rafael Sanchis
      • Rafael_Sanchis
      • 3 mths ago
      • Reported - view

       

      Excelent Sotirios, Works Perfect.

      • Database App Developer
      • vermau81
      • 3 mths ago
      • Reported - view

       Thank you my friend. I am already studying the CSS code for the buttons and trying to get a hang of it. I am sure that I will learn CSS as well in this process.

      I haven't studied the code for charts though. How will I be able to provide data for these charts from the tables in the database?

      • Database App Developer
      • vermau81
      • 3 mths ago
      • Reported - view

       Also I wanted to ask that is it possible to change the underlying column system of the Ninox form to a CSS grid 'cuz I want to display the sales data in a table as well below the charts suing a full row. Think of it like a footer on a web page..

      Currently with the column system that Ninox uses, it is not possible to have different heights of each cell/column on the form, however with the CSS grid I believe it is possible to have different size cells in the grid.

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

       

      For this graph I use this code

       

      let Data := ((select 'Progress-Cost Report') order by 'Date CutOff');
let DataDates := Data.format('Date CutOff', "DD/MMM");
let DataRow1 := Data.'Total Plan Value';
let DataRow2 := Data.'Total Earned Value';
let DataRow3 := Data.'Cumulative Cost';
let vLegend := for i in DataDates do
        "'" + i +
        if not i = item(DataDates, count(DataDates)) then
            "',"
        else
            "'"
        end
    end;
let vDataLine1 := for j in DataRow1 do
        j +
        if not j = item(DataRow1, count(DataRow1)) then
            ","
        end
    end;
let vDataLine2 := for k in DataRow2 do
        k +
        if not k = item(DataRow2, count(DataRow2)) then
            ","
        end
    end;
let vDataLine3 := for k in DataRow3 do
        k +
        if not k = item(DataRow3, count(DataRow3)) then
            ","
        end
    end;
let vInit := if DarkMode then
        "echarts.init(chartDom, 'dark')"
    else
        "echarts.init(chartDom)"
    end;
html(eChartQuell() +
"
<div id='Graph1' style='width:100%; height:100%;'></div>
    <script type='text/javascript'>
     var chartDom = document.getElementById('Graph1');
            var myChart = " +
vInit +
";
            var option;

            option = {
title: {
        text: '   Earned Value  Curve',
        subtext: ' Project: OCEMI - MACOLLA H1B PETROPIAR, S.A.',
        left: 'left',
            textStyle: {
                 fontSize: 14
    }
        },
legend: {
                        top: 'top',
            data: ['Planned Value', 'Earned Value', 'Cumulative Cost']
        },
tooltip: {
        trigger: 'axis',
            show: true
        },
toolbox: {
orient: 'vertical',
left: 'right',
top: 'center',
    feature: {
        title: 'Data View',
        mark: { show: true },
    saveAsImage: {show: true},
        dataView : {show: true, readOnly: false},
        restore: {},
        magicType: {
             type: ['line', 'bar']
            }
}
        },
  xAxis: {
    type: 'category',
    data: [" +
vLegend +
"]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Planned Value',
      type: 'line',
      data:  [" +
vDataLine1 +
"],
    },{
      name: 'Earned Value',
      type: 'line',
      data:  [" +
vDataLine2 +
"],
    },{
      name: 'Cumulative Cost',
      type: 'line',
      data:  [" +
vDataLine3 +
"],
    }
  ]
};
            option && myChart.setOption(option);
      myChart.setOption(option);
    </script>
 </body>")
      • szormpas
      • 3 mths ago
      • Reported - view

        Hi, follow the Dashboard Template project.

      I will import some sample data into a Ninox table and present them using eCharts in the next few days along with several new enhancements.

      • szormpas
      • 3 mths ago
      • Reported - view

        Hi, 

      displaying the sales data in a table below the charts inside the CSS grid container is feasible, but the table should be a custom HTML one.

      In one of the next updates, I will try to integrate something similar into the Dashboard Template project.

    • Database App Developer
    • vermau81
    • 3 mths ago
    • Reported - view

    Hello friends, I was playing around with CSS a bit (with HTML, BODY and DIV height attributes. I set the Html and Body height to 50% and the entire code and display editor in Ninox literally shrinked to 50%.

    My idea was to make the Button sidebar to100%VH (button sidebar covers 100% of the body height), but no matter what I have tried so many things (referred from internet), the Div is not touching the bottom of the Ninox display/editor window. It stays at 50%.

    But for sure that Div is being the Child of another element and it is covering 100% height of that element. I can't understand what that parent element of the Div is. Something that lies between the Body and the Div element in hierarchy. In code there is nothing between the Body and Div element, so Div should be a direct child of the Body element.

    To understand this I changed the color of the Div element. Screenshot is attached. Can someone please help me understand what this secret element is in the Ninox editor DOM?

      • Sean
      • 3 mths ago
      • Reported - view

       

      I wouldn't modify the style for any HTML tags - https://developer.mozilla.org/en-US/docs/Web/HTML/Element - because that can, as you found out, affect the whole Ninox UI.

      If more than one style declaration for an element exists, then the style declaration with the highest specificity is applied - https://www.w3schools.com/css/css_specificity.asp

      Almost every <div> tag in Ninox has a class attribute and that is the category used for most of the styling. Some Ninox <div> tags also use the inline style attribute which has a higher specificity than the class attribute. Those can be overridden with the !important rule.

      .form is the parent class for all elements on the Form view. You can find the different classes by using the developer tools in any major browser.

      • Database App Developer
      • vermau81
      • 3 mths ago
      • Reported - view

       Hello Sean, I think after putting in some rigorous effort, I can now agree with you that it's better to go with the Ninox's default Horizontal fluid layout system rather than fight with it to make my way through it. I should rather spend more time designing the business solution and adding features to my app. My whole development process has come to a halt 'cuz of this vertical dashboard.

      But it was good to do some learning though.

      Just for knowledge, can you please advise how can we make a custom Div a child of the main "form" element and that custom Div's class a child of ".form" class in our CSS and HTML code?

      I am going to convert the dashboard to horizontal layout system with buttons and charts on it for the future.

      • Sean
      • 3 mths ago
      • Reported - view

      Hi  

      I don't think I have expressed an opinion on Ninox's form layout system yet, but I do think that using css grid is more flexible and up-to-date. A quick Google search on drag and drop grid html returned a simple example in CodePen. https://codepen.io/makhtar/pen/YzPJRpX

      I slowed my efforts to make CSS grid work with Ninox's Form view after  posted his excellent solution and you seemed satisfied with it. Screenshot -

      I don't like how I have to use nth-child for every field and that would also be a non-starter for most users. I use borders to confirm how much space each element is using. I used grid-template-areas for that layout and those are individual fields and not one Formula field. Another problem is with spacing if I put "Text" and "Number" on the same row. I think that is due to the inline width style that Ninox applies to all field elements.

      Just for knowledge, can you please advise how can we make a custom Div a child of the main "form" element and that custom Div's class a child of ".form" class in our CSS and HTML code?

      I'm not sure what you mean. There are only two ways that I'm familiar with to add a <div> to the Form view. First and easiest is to use Ninox's form builder. Every element added will automatically be a child of the parent .form class.

      You can see both CSS styling and HTML attribute style inline styling in the screenshot.

      The second method is to inject an element into the DOM with JavaScript. You would need to put that code in a button or run it in "Trigger after open"

Login to reply

Content aside

  • 3 mths agoLast active
  • 26Replies
  • 475Views
  • 6 Following