1

Wish List or can the great Jacques pull one out of the hat

TABS can have colours which is awesome.  Only issue is the the TAB itself not :-( . I wonder if one could code so that the TAB and the Background have the colour chosen.  Having a row of Coloured TABS would be great aesthetically speaking

20 replies

null
    • aMAZiNgjin
    • 2 yrs ago
    • Reported - view

    add a formula field and add the style for coloring the tabs, use nth-child(1,2,3..) to select the tab you want to color:

     

    html("
    <style>
    .tab:nth-child(2) {
    background-color:#FFFFC9;
    color:#000;
    }
    .tab:nth-child(3) {
    background-color:#162F44;
    color:#fff;
    }
    </style>
    
    ")
    

    for the color of the active tab (you dont need the nth-child if you want the same active color for all tabs):

    .tab.selected:nth-child(1) {
    background-color:#CF3067;
    color:#fff;
    }
    

      • Rafael Sanchis
      • Rafael_Sanchis
      • 2 yrs ago
      • Reported - view

      Alex  Yes work, but when change from tab to tab lost the color. Is normal or need more html code ?

      • aMAZiNgjin
      • 2 yrs ago
      • Reported - view

      Rafael yes, you need to add the code in every tab and it cant be hidden. if you have formula fields in your tab anyway, you could append it there, if you dont like the extra field per tab.

      if you are using the cloud version, you could also use a browser extension to load the css globally - but it would only apply for yourself and not other users.

      • Rafael Sanchis
      • Rafael_Sanchis
      • 2 yrs ago
      • Reported - view

      Alex Thanks Alex 

    • Alan_Cooke.1
    • 2 yrs ago
    • Reported - view

    Thanks for all of these replies

    • Ninox developper
    • Jacques_TUR
    • 2 yrs ago
    • Reported - view

    Dear Alan Cooke Alan Cooke, impossible for me not to answer to such a title 😂.

    I updated the Ninext project and now it is possible to add an event function in the "Display field only if" trigger to update different parameters of the tab including the color, the title, the tooltip and a badge.

    The attached application shows examples of settings.

    Enjoy 🙃

      • Alan_Cooke.1
      • 2 yrs ago
      • Reported - view

      Jacques TUR Wow!  Like I said.  This is awesome - thank you.  Where do I find this Ninext Project?

      • Ninox developper
      • Jacques_TUR
      • 2 yrs ago
      • Reported - view

      Alan Cooke You're welcome. Currently, the sources in JavaScript are here : https://github.com/JacquesTur/Ninext

    • Ninox developper
    • Jacques_TUR
    • 2 yrs ago
    • Reported - view

    Following Alan Cooke Alan Cooke's request, I have added the possibility to set the background color of the tab independently from the form.

    Just add item formBackgroundColor in onUpdate event function inside "Display field only if » trigger  :

    function onUpdate(event : any) do
        {
            caption: Caption,
            color: Color,
            backgroundColor: BackgroundColor,
            formBackgroundColor: 'Form BackgroundColor',
            tooltip: Tooltip,
            badge: {
                caption: 'Badge caption',
                color: 'Badge color',
                backgroundColor: 'Badge BackgroundColor'
            }
        }
    end;
    true
    

    see the application in attachment

      • Patrick_W
      • 2 yrs ago
      • Reported - view

      Dear Jacques TUR, as first i have to thank you for your great input.

      Is it possible to add a function to change the background-color of the tab when it is selected? Maybe an additional for a mouseover-background-color?

      • Ninox developper
      • Jacques_TUR
      • 2 yrs ago
      • Reported - view

      Patrick W. Do you mean a different selection color for each tab or change the selection color for all tabs at once?
      To change the selection color for the tabs, just modify the .tab.selected CSS. See excellent work found by Sean

      • Patrick_W
      • 2 yrs ago
      • Reported - view

      Jacques TUR yes I'm looking for a selection color each tab. So if a tab is not active, it has color A, else color B. Only the mouseover-color could be done with the Theme Helper from Sean (in my case).

      And one more thing: If I open a Database and the Ninext Project got loaded, the colored Tab and Badge is shown just in the first Tab, because that Tab is shown. The other Tabs doesn't show the colors and Badges. I have to open each Tab one time to get the color/badge visible. After this step I can switch between different tables as I want. When I come back, the correct colors/badges will stay. Is there any quick solution or a workaround to get shown the colors/Badges directly?

      • Ninox developper
      • Jacques_TUR
      • 2 yrs ago
      • Reported - view

      Patrick W. Are you talking about this application? Strange, I just tried it and everything works fine. Could you send me the application that is on your machine and that does not work?

      • Patrick_W
      • 2 yrs ago
      • Reported - view

      Jacques TUR there seems to be a bigger problem. I got different cases. In every case I see that the modules got loaded about your new method "Options --> Trigger after opening" (popup)

      Actually I'm not at home and have only Firefox to do tests. Unfortunately I can't test it with Chrome until tomorrow.

      Case 1: Open the database from the team site - no Badges / no colored Tabs

      Case 2: Refreshing the browser page (F5)
      Case 2.1: First tab which is active shows the badge, second tab shows no badge / colored tab. When I switch to second tab, the first tab will show the correct color. When I switch back to the first tab, the second tab shows the correct color, too.
      Case 2.2: First tab which is active shows the badge, second tab shows the badge / colored tab - in this case I think, there would been shown all tabs as expected, if you have more (this case happens really rare)
      Case 2.3: Same as case 1

      Case 3: Refreshing the browser page including cleaning the cache (CTRL + F5)
      Case 3.1: Same like case 2.1
      Case 3.2: Same like case 2.2
      Case 1 doesn't happen.

      In the attachments I uploaded a test database. The table "Materialverwaltung" should show the first and second tab in colors. If you activate the admin settings, you will see the fields for the badge/color settings.

      Edit:

      And yes, I copied your Custom Tab file and used the codes of that. When I open your file, I have to do multiple clicks to get shown a record. In that case the badges will been shown correctly everytime. But in my case the database trigger after opening will bring me directly to the first record of "Materialverwaltung" which is used like a dashboard - after the modules got loaded. Also the view is set as a form.

      • Ninox developper
      • Jacques_TUR
      • 2 yrs ago
      • Reported - view

      Patrick W. I have fixed it. Thank you very much for your help!

      • Patrick_W
      • 2 yrs ago
      • Reported - view

      Jacques TUR Perfect. I cannot find any issues in the cases I wrote. When I start my database, the tabs are shown as expected. Thank you very much for that fast fix.

      Back to the question. Would it be possible to add the color option on each tab for been active?

      • Ninox developper
      • Jacques_TUR
      • 2 yrs ago
      • Reported - view

      Patrick W. C'est fait. Vous devez simplement spécifier la couleur dans l'élément select : 

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

      function onUpdate(event : any) do
          {
              caption: 'T1: Caption',
              color: 'T1: Color',
              backgroundColor: 'T1: BackgroundColor',
              formBackgroundColor: 'T1: formBackgroundColor',
              selected: {
                  color: "blue",
                  backgroundColor: "red"
              },

              tooltip: 'T1: Tooltip',
              badge: {
                  caption: 'T1: Badge caption',
                  color: 'T1: Badge color',
                  backgroundColor: 'T1: Badge BackgroundColor'
              }
          }
      end;
      true

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

      • Patrick_W
      • 2 yrs ago
      • Reported - view

      Jacques TUR it works. Thank you!!

    • Patrick_W
    • 2 yrs ago
    • Reported - view

    Hey Jacques TUR ,

    would it be possible to set border colors on the tabs for selected and non-selected? I think that will look smarter.

    Best regards

      • Ninox developper
      • Jacques_TUR
      • 2 yrs ago
      • Reported - view

      Patrick W. I tried, but it creates a downward shift in the text.

      I think it would be better to harmonize the background and text colors when the tabs are selected or not.

      Moreover, it's a lot of parameters to define (there are already many) and we could move away from the notion of LowCode which is a strength of Ninox: 20% of effort for 80% of result. 
      Of course this notion remains very personal, but I could notice that having less function also allows to be more creative. 

      The difficulty is to find the right balance: to have enough functions to work and not too many to not get lost in details with low added value.

      It's an art in which I'm only a beginner 😊.

Content aside

  • 1 Likes
  • 2 yrs agoLast active
  • 20Replies
  • 376Views
  • 6 Following