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

       ,

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

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

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

      • Database App Developer
      • vermau81
      • 1 mth ago
      • 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
      • 1 mth ago
      • 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
    • 1 mth ago
    • 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
      • 1 mth ago
      • 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
      • 1 mth ago
      • 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
      • 1 mth ago
      • Reported - view

       I see…excellent. Thank you for clarifying this 😊

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

       Hi Sean

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

      Example if Date < DataDate required (yes)

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

       

      Thanks Sean 👍

      • Database App Developer
      • vermau81
      • 1 mth ago
      • 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
      • 1 mth ago
      • 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
    • 1 mth 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
      • 1 mth ago
      • 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
      • 1 mth ago
      • 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.

Content aside

  • Status Answered
  • 1 Likes
  • 1 mth agoLast active
  • 50Replies
  • 265Views
  • 6 Following