1

Field labels in RED color

Hi,

Just wanted to find out if it was possible to make the labels of the fields in RED color for all required fields in a table. eg: In the Sales Order table, I want the 'Sale Order Date' label to be in RED color to signify that it is a required field on the form.

Thanks,

Vermaji

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

50 replies

null
    • szormpas
    • 6 mths agoThu, July 18, 2024 at 10:22 AM UTC
    • Reported - view

    Hi, you can't change the color of the field's label, but you can change its 'Required' option to "Yes." This way, the border turns red when the field is empty (see the screenshot).

      • Database App Developer
      • vermau81
      • 6 mths agoThu, July 18, 2024 at 11:06 AM UTC
      • Reported - view

       Thank you for the reply mate.. Yes, I know about this, but was thinking that if Ninox had that feature to really allow us to mark the fields labels with custom colours. This way we could make the UI more aesthetic.

      • szormpas
      • 6 mths agoThu, July 18, 2024 at 11:31 AM UTC
      • Reported - view

       , 

      I agree with you. It would be nice to be able to change the appearance of the labels in all fields and have the "Style" option available in them, as is done with the "Formula" fields.

      Who knows? Maybe we will see some of these features in the upcoming Ninox 3.13 release!

      • Database App Developer
      • vermau81
      • 6 mths agoThu, July 18, 2024 at 11:51 AM UTC
      • Reported - view

       I am attaching a sample SO sheet that I want to create in Ninox. Is it possible to create this kind of UI in Ninox..

      • szormpas
      • 6 mths agoThu, July 18, 2024 at 12:42 PM UTC
      • Reported - view

       , you can do the following:

      • As  suggests, you can create labels by using formula fields. Put inside them something like: html("<strong style='color:red;'>Customer Name</strong>").
      • Use a Heading Layout element for the section divider and format it accordingly.
      • At least for the choice fields, you can use the name as a placeholder.
      • Database App Developer
      • vermau81
      • 6 mths agoThu, July 18, 2024 at 4:28 PM UTC
      • Reported - view

       Could you please advise how can we use a Heading Layout element without any text, 'cuz when I try to use it without text, it doesn't allow me to do so. I have been tried " " and "".

      I am attaching a screenshot of the form that I am designing for the Sales Order screen. In this screen the 'Sales Order Status' at the top right is misaligned. It is a Free Text element from the Layout Fields section. I have no idea how to align it with the buttons at the top.

      • szormpas
      • 6 mths agoFri, July 19, 2024 at 12:29 AM UTC
      • Reported - view

       ,

      I have post a new topic: How to insert Line Dividers into a page or table form

    • Alan_Cooke
    • 6 mths agoThu, July 18, 2024 at 12:02 PM UTC
    • Reported - view

    I have not tried this myself but perhaps one could set the required field label as hidden and then add a formula field where the label would be which can be coloured red.

      • szormpas
      • 6 mths agoThu, July 18, 2024 at 12:25 PM UTC
      • Reported - view

       hi, or you can put the field name as a placeholder like the screenshot below

      • Database App Developer
      • vermau81
      • 6 mths agoThu, July 18, 2024 at 4:15 PM UTC
      • Reported - view

       thank you heaps.. I will try this out. I did not know that we could use HTML inside the formula field to display them as labels..

      However, having to add a field in the table just to display as a label is not logical at all. Ninox should add a new element in the list of Layout fields called "Labels"..

      • szormpas
      • 6 mths agoThu, July 18, 2024 at 5:15 PM UTC
      • Reported - view

       , sure it seems no logical but on the other hand this is the Ninox logic, this is the Ninox way of doing things.

      My understanding is that inside every Ninox table we do not only store raw data but also the “data” regarding the presentation of our “raw data”.

      I am not sure if the above make sense to you but don’t be afraid to add as many fields as you like into your tables!

    • Sean
    • 6 mths agoThu, July 18, 2024 at 10:40 PM UTC
    • Reported - view

    You can add a Formula field with this CSS in it to change the label and background color.

    html("
    <style>
        .component.editor.editor-string.error {
            background-color: lightgray;
        }
        .component.editor.editor-string.error label {
            color: red;
        }
    </style>
    ")
    

    I have also attached a simple demonstration database.

      • szormpas
      • 6 mths agoFri, July 19, 2024 at 12:21 AM UTC
      • Reported - view

       this is really awesome! Thanks 😄

      What is not obvious to me is how I choose the field to which I want to apply the new settings. For example, in your demo database, how can I apply the red label to the 'text' or 'number' field?

      • Sean
      • 6 mths agoFri, July 19, 2024 at 1:34 AM UTC
      • Reported - view

       you just need to set any field's Required setting to Yes. Ninox just adds or removes the error class based on whether the required field is empty or not. You will see that the styling disappears if the required field is filled and that is because Ninox removes the error class and then the style classes in the CSS no longer match.

      • szormpas
      • 6 mths agoFri, July 19, 2024 at 6:58 AM UTC
      • Reported - view

       I see…excellent. Thank you for clarifying this 😊

      • Rafael Sanchis
      • Rafael_Sanchis
      • 6 mths agoFri, July 19, 2024 at 10:15 AM UTC
      • Reported - view

       Hi Sean

      Is there a way to change the required status with a script. 

      Example if Date < DataDate required (yes)

      • Sean
      • 6 mths agoFri, July 19, 2024 at 3:00 PM UTC
      • Reported - view

       The best I can do at this point is change the label color and background color. The error text would be difficult for me to modify. Maybe a tooltip? That's more  purview.

      if Date < date(2024, 7, 19) then
          html("
          <style>
              .component.editor.editor-date label {
                  color: red;
              }
              .component.editor.editor-date {
                  background-color: lightgray;
              }
          </style>
          ")
      end
      
      • Rafael Sanchis
      • Rafael_Sanchis
      • 6 mths agoSat, July 20, 2024 at 11:13 AM UTC
      • Reported - view

       

      Hi Sean

      Definitely it doesn't work with date fields.

      if date('Plan 1') < date(DataDate) then
          html("
          <style>
              .component.editor.editor-date label {
                  color: red;
              }
              .component.editor.editor-date {
                  background-color: green;
              }
          </style>
          ")
      end
      • Sean
      • 6 mths agoSat, July 20, 2024 at 2:44 PM UTC
      • Reported - view

      Hi  

      I don't post solutions that don't work for me at the very least. I have attached a simple demonstration database with two date CSS options. I understand the hardcoded date example is not practical and was more of a proof of concept.

      For anyone who wants to use CSS inside Ninox if-then statements, you will need to use separate Formula fields for each condition. Otherwise, any previous CSS will be ignored.

      • Rafael Sanchis
      • Rafael_Sanchis
      • 6 mths agoSat, July 20, 2024 at 3:11 PM UTC
      • Reported - view

       

      Thanks Sean 👍

      • Database App Developer
      • vermau81
      • 5 mths agoSat, July 27, 2024 at 5:23 PM UTC
      • Reported - view

       Hi, thank you for the solution. I tried the script and it works like a charm, however there is only one thong.  It's just that this code changes the background colour and the label colour for all the required fields on the form right from the start i.e when a new record is added.

      Ideally it should only change the background and foreground colours only if we do not enter anything in the required fields. Initially when the form is opened or a new record is created, all fields should look normal.

      To achieve this, I moved the code from the formula field to the auto Trigger of the second Text field ("Trigger after update") and realised that the code does not work. Then I moved the code to the auto Trigger of the Table ("Trigger after update") thinking that the code will execute when we save the record, however it still does not work.

      I really can't understand that the code that works in the formula field, why doesn't work in the Trigger ?

      Thanks,

      Vermaji

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

      • Sean
      • 5 mths agoSat, July 27, 2024 at 9:26 PM UTC
      • Reported - view

       Hi,

       said:
      It's just that this code changes the background colour and the label colour for all the required fields on the form right from the start i.e when a new record is added.

      This is consistent with how Ninox handles Required fields. Without the added CSS, all Required fields still have a red border. That is the behavior for both existing records and new records.

       said:
      Ideally it should only change the background and foreground colours only if we do not enter anything in the required fields. Initially when the form is opened or a new record is created, all fields should look normal.

      This is a UX design decision by Ninox and I don't think CSS alone can override it. What you want requires JavaScript and it would be far easier for Ninox developers to implement. Even if someone came up with a JavaScript solution, I believe it can only be triggered by a button which wouldn't be very practical.

       said:
      To achieve this, I moved the code from the formula field to the auto Trigger of the second Text field ("Trigger after update") and realised that the code does not work. Then I moved the code to the auto Trigger of the Table ("Trigger after update") thinking that the code will execute when we save the record, however it still does not work.

      A field's content must be changed to activate Trigger after update. Simply tabbing through won't do it. If you were able to get it to work with the table level trigger how would you know which field(s) to highlight?

      For what it is worth, users aren't able to save records. This is another Ninox design decision. Users can create, modify and delete records.

       said:
      I really can't understand that the code that works in the formula field, why doesn't work in the Trigger ?

       The html() function doesn't work in tables either.

    • Sean
    • 6 mths agoFri, July 19, 2024 at 3:08 PM UTC
    • Reported - view

    Here is a list of classes for the different field types

    Text                                          .component.editor.editor-string
    Text(multiline)                        .component.editor.editor-string
    Rich text                                  .component.editor.editor-html
    Number                                   .component.editor.editor-number
    Yes/No                                     .component.editor.editor-boolean
    Choice                                     .component.editor.editor-choice
    Multiple choice                      .component.editor.editor-multi
    Date                                         .component.editor.editor-date
    Time                                         .component.editor.editor-time
    Appointment                          .component.editor.editor-appointment
    Color                                        .component.editor.editor-color
    Choice (dynamic)                   .component.editor.editor-dchoice
    Multiple choice (dynamic)    .component.editor.editor-dmulti

      • szormpas
      • 6 mths agoFri, July 19, 2024 at 10:23 PM UTC
      • Reported - view

       Hi,

      html("
          <style>
              .component.editor.editor-string input {
                  color: yellow;
                  background-color: red;
              }
          </style>
          ")
      

      Playing around, I discovered that I could use the code above to modify the text color and background color of the input area in a text box when the focus is on it.

      How can I achieve the same effect inside the input area when the focus is out of the text box (see text 2 below) ?

      • Sean
      • 6 mths agoSat, July 20, 2024 at 1:38 AM UTC
      • Reported - view

       Hi,

      .nx-input works for the Text field and some of the other fields as well.

      html("
          <style>
              .nx-input {
                  color: yellow;
                  background-color: red;
              }
          </style>
      ")
      

      You can also use .nx-input__input instead when the field has focus.

    • Sean
    • 6 mths ago
    • Reported - view

    Here is a list of classes for the different field types

    Text                                          .component.editor.editor-string
    Text(multiline)                        .component.editor.editor-string
    Rich text                                  .component.editor.editor-html
    Number                                   .component.editor.editor-number
    Yes/No                                     .component.editor.editor-boolean
    Choice                                     .component.editor.editor-choice
    Multiple choice                      .component.editor.editor-multi
    Date                                         .component.editor.editor-date
    Time                                         .component.editor.editor-time
    Appointment                          .component.editor.editor-appointment
    Color                                        .component.editor.editor-color
    Choice (dynamic)                   .component.editor.editor-dchoice
    Multiple choice (dynamic)    .component.editor.editor-dmulti

      • szormpas
      • 6 mths ago
      • Reported - view

       thanks, the .nx-input__input is working inconsistently in my setup, but the code below is giving me the best results:

      html("
          <style>
              .nx-input {
                  color: yellow;
                  background-color: red;
              }
              .component.editor.editor-string input {
                  color: yellow;
                  background-color: red;
              }
          </style>
      ")
      
      • red_kite
      • 5 mths ago
      • Reported - view

       Thank you for sharing your knowledge. I have a question. The field label in Ninox can be set to "placeholder". Do you know how it could be addressed in CSS? I have try versions like:

      .component.editor.editor-string label placeholder{
          text-align:center;
      }
      .component.editor.editor-string placeholder{
          text-align:center;
      }
      .component.editor.editor-string label_placeholder{
          text-align:center;
      }
      .component.editor.editor-string label.placeholder{
          text-align:center;
      }
      

      But nothin works. Greetings and have a nice weekend. MZ

      • Sean
      • 5 mths ago
      • Reported - view

       Happy to help when I can. The following works:

          .nx-input--placeholder {
              text-align: center;
          }
      

      Have a nice weekend as well.

      • red_kite
      • 5 mths ago
      • Reported - view

       Thank you so much. Now my format is perfect for my eyes;-)

    • Mel_Charles
    • 6 mths ago
    • Reported - view

    I read this thread with much interest and tried all the options above.

    I like the idea of setting a text input cell to colour base on Seans field "Required' Option. but also like  the idea of setting the cell colour as an infill as per Sotirios suggestion. This test showed that it affects all input cells. I would like this to this apply the infill but to just either the required cells or better still just one input filed of my choosing. Do this think this is doable?

    Ie in my orders form a product description text line (is required field) but after I input the data I would like it to stay highlight with the red and infill and yellow text (just this field!)

      • szormpas
      • 6 mths ago
      • Reported - view

        you are right, the above code is applied indiscriminately to all fields on the current page, even in the pop-up window of each field's formatting options. What you suggest is the next logical step and I hope Ninox listens to us so that they can officially include these features in one of their next releases!

      • Sean
      • 6 mths ago
      • Reported - view

       This is the only solution I can find right now

      html("
      <style>
          .form .component.editor.editor-string:nth-child(2) .nx-input,
          .form .component.editor.editor-string:nth-child(2) .nx-input__input {
              color: yellow;
              background-color: red;
          }
      </style>
      ")

      In this example it would style the second field on your form view. You would just need to change the number in nth-child() to the number of the field on your form.

      • Sean
      • 6 mths ago
      • Reported - view

       if you precede your class list with .form like my example for Mel, it will only affect the elements on your form and not other elements in the app's UI

      • Mel_Charles
      • 6 mths ago
      • Reported - view

       I like it - I can use this ! 🙂 i have set it to field 1

      Don't know anything about html/css

      So silly question would I repeat lines 3 to 6 if i wanted it to effect another text input as well ie field 1 and say field 6 - have tried it but it don't work - why would it? = I am just stabbing in the dark

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

       

      Works in this way, maybe there are best way.

      html("
      <style>
          .form .component.editor.editor-string:nth-child(2) .nx-input,
          .form .component.editor.editor-string:nth-child(2) .nx-input__input {
              color: black;
              background-color: orange;
          }
      </style>
      <style>
          .form .component.editor.editor-string:nth-child(3) .nx-input,
          .form .component.editor.editor-string:nth-child(3) .nx-input__input {
              color: black;
              background-color: orange;
          }
      </style>
      <style>
          .form .component.editor.editor-date:nth-child(6) .nx-input,
          .form .component.editor.editor-date:nth-child(6) .nx-input__input {
              color: white;
              background-color: green;
          }
      </style>
      ")
      • Sean
      • 6 mths ago
      • Reported - view

       Layout fields have to be counted as well. If you have Headers, Spaces, Line breaks, etc., they will need to be counted. By the way, much of my learning is by trial and error 😉

       

       you don't need separate style tags for each style. Additionally, you can combine tags if the same style will be used by multiple tags.

      html("
      <style>
          .component.editor.editor-string.error {
              background-color: lightgray;
          }
          .component.editor.editor-string.error label {
              color: red;
          }
          .component.editor.editor-date.error label {
              color: red;
          }
          .component.editor.editor-date.error {
              background-color: lightgray;
          }
          .form .component.editor.editor-string:nth-child(1) .nx-input,
          .form .component.editor.editor-string:nth-child(1) .nx-input__input,
          .form .component.editor.editor-string:nth-child(3) .nx-input,
          .form .component.editor.editor-string:nth-child(3) .nx-input__input {
              color: yellow;
              background-color: red;
          }
      </style>
      ")
      

      I used nth-child(1) and nth-child(3) because there is a Line break between Text and Text 2.

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

       Thanks again now when place the date  go to normal field

      • Sean
      • 6 mths ago
      • Reported - view

      would you please post your code and let me know what you are trying to achieve.

      • szormpas
      • 6 mths ago
      • Reported - view

        hi, also I like it. A practical way to give emphasis on one or more input fields. Thank you 👍

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

       

      html("
      <style>
          .component.editor.editor-string.error {
              background-color: lightgray;
          }
          .component.editor.editor-string.error label {
              color: black;
          }
          .component.editor.editor-date.error label {
              color: green;
          }
          .component.editor.editor-date.error {
              background-color: lightgray;
          }
          .form .component.editor.editor-string:nth-child(2) .nx-input,
          .form .component.editor.editor-string:nth-child(2) .nx-input__input,
          .form .component.editor.editor-string:nth-child(2) .nx-input,
          .form .component.editor.editor-string:nth-child(2) .nx-input__input {
              color: black;
              background-color: orange;
          }
      </style>
      ")
      
    • Sean
    • 5 mths ago
    • Reported - view
     said:
    now when place the date  go to normal field

    Do you want this to happen?

      • Mel_Charles
      • 5 mths ago
      • Reported - view

       @sean  Great work Guys !   

       I have yet to get to grips with html workings - can only do simple basics for my adverts ...

      Have a more pressing problem trying to learn to play Fats Waller "Handful of keys"
      but thats another story!  See here
      🤣🤣

    • Mel_Charles
    • 5 mths ago
    • Reported - view

    @sean

    I tried your code and set it for field 1 and 9 (both text fields) works like a charm!

    i then tried seeting the last 2 .form line to 2 (field 2 is a date field and nothing happened)

    I'm not quite understand the top section of the code l- look slike error hadnling for date and string errors but i don't understand how this applies/works in respetc of my filed 2 (date field) and what error would it be expecting?

     

    html("
    <style>
        .component.editor.editor-string.error {
            background-color: lightgray;
        }
        .component.editor.editor-string.error label {
            color: red;
        }
        .component.editor.editor-date.error label {
            color: red;
        }
        .component.editor.editor-date.error {
            background-color: lightgray;
        }
        .form .component.editor.editor-string:nth-child(1) .nx-input,
        .form .component.editor.editor-string:nth-child(1) .nx-input__input,
        .form .component.editor.editor-string:nth-child(2) .nx-input,
        .form .component.editor.editor-string:nth-child(2) .nx-input__input {
            color: yellow;
            background-color: red;
        }
    </style>
    ")
      • Sean
      • 5 mths ago
      • Reported - view

       This thread originally started with a request to change the colors for Required fields. If you don't need that then you can just delete those lines.

      Try this for the Date field

          .form .component.editor.editor-date:nth-child(2) .nx-input,
          .form .component.editor.editor-date:nth-child(2) .nx-input__input {
              color: white;
              background-color: green;
          }
      

      Change the number if you need to.

      • Mel_Charles
      • 5 mths ago
      • Reported - view

      ah now makes sense - cheers

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

       

      Can you place a screenshot please  

      • Mel_Charles
      • 5 mths ago
      • Reported - view

       This is just a test to prove the theory!

      so in @Sean's script i have

      .form .component.editor.editor-date:nth-child(1) .nx-input,
          .form .component.editor.editor-date:nth-child(8) .nx-input__input {
              color: yellow;
              background-color: red;
          }
      

      as you can see sean said you have to count the number of item elements on the form. in my second case it is 8 (8th item along)

      • Mel_Charles
      • 5 mths ago
      • Reported - view

       The colour is terrible but I chose to ensure it stand out for testing. and because i am colour blind if I had set it to  say cyan,  I would never know if it had worked or not 🤣🤣

      My system has some whacky colours and my colleagues hate me when I am testing !!!

      I wish Ninox would add some kind of "style" sheet control !!

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

       

      You can use hex color and choice a good color 

      • Mel_Charles
      • 5 mths ago
      • Reported - view

       I know mate.... just whilst i'm testing very bold colours help from a colour blind perspective - 🙂