I have a table of records in my web screen where the user needs to select at least one row.  If the user does not select at least one row, I want to highlight the table (in red) and display an error message as per standard Outsystems input validation.  Unfortunately there are no .valid or .validationmessage properties for the table widget.

How can I achieve what I am trying to achieve without resorting to the more general feedback message action ?

Cheers, Richard

Hi Richard,

There is no .valid or .validationmessage property because table is not an input kind of element where users supposed to fill their input values.

To achieve what you are trying to do, 

1. You can keep one boolean local variable on your screen 

2. On your screen action you can validate if atleaset on checkbox is filled or not. 

3. If checked then set that variable to true else set it to false.

4. On you table you can set style for highliting table / showing validation message based on this local variable.

Nikhil Gaur wrote:

Hi Richard,

There is no .valid or .validationmessage property because table is not an input kind of element where users supposed to fill their input values.

To achieve what you are trying to do, 

1. You can keep one boolean local variable on your screen 

2. On your screen action you can validate if atleaset on checkbox is filled or not. 

3. If checked then set that variable to true else set it to false.

4. On you table you can set style for highliting table / showing validation message based on this local variable.

Thanks Nikhil,

Steps 1-3 I have already done, this post was about step 4 and I am looking for options and detail on how to do it.

Cheers, Richard

Hi Richard,

That is very simple. You can add a style or css attribute on your table. See below images

For setting style attribute


For setting class property (you have to create a css class (in your theme/ screen) for this first):

Hi Richard, 

To complement Nikhil's answer, you may want to check this article. 

https://success.outsystems.com/Documentation/How-to_Guides/How_to_style_the_last_row_of_a_Table_Records

Is the same for version 11, I think, and you can set the row element style/class property, depending on your valid property. 

Cheers. 

P. S. I am saying row, but probably you can apply a dynamic style to the table itself, like a background-colour, though the same method. 

Not sure if you want to change the whole table or only the lines. 

Nikhil Gaur wrote:

Hi Richard,

That is very simple. You can add a style or css attribute on your table. See below images

For setting style attribute


For setting class property (you have to create a css class (in your theme/ screen) for this first):

Thanks Nikhil,

I presume that 'Valid' is a local boolean variable ?  Also, how to display the error message and to "switch off" the error formatting and message ?

Cheers, Richard.

Eduardo Jauch wrote:

Hi Richard, 

To complement Nikhil's answer, you may want to check this article. 

https://success.outsystems.com/Documentation/How-to_Guides/How_to_style_the_last_row_of_a_Table_Records

Is the same for version 11, I think, and you can set the row element style/class property, depending on your valid property. 

Cheers. 

Thank you Eduardo, that provides a bit more context and detail to Nikhil's suggestion.


Eduardo Jauch wrote:

P. S. I am saying row, but probably you can apply a dynamic style to the table itself, like a background-colour, though the same method. 

Not sure if you want to change the whole table or only the lines. 

Hi Eduardo,

It is part of the general field validation on the screen and I have a form above the table records.  I want it to be as close as possible to normal Outsystems error formatting so that it is a consistent UX i.e. a red table border and a localised error message at the bottom of the table.

Cheers, Richard.

Solution

I would use the same mechanism for the inputs. 

If the local Boolean variable is false, I would add the Not_Valid class to the table, otherwise I would remove it.
The class would be defined as:

.TableRecords.Not_Valid {
   border: var(--border-size-s) solid var(--color-error);
}

You can use the extended properties with class attribute and an if function

class
= if (valid, "TableRecords", "TableRecords Not_Valid")

As for the message, I would just put an expression inside a named IF widget, using a local text variable for value (with the message). The condition would be the same local boolean variable. Add the ValidationMessage class to it. The input validation messages have also another attribute called Role with value "alert". You may want to add to the expression through extended attributes, though I don't know if it is necessary.

Now it is a matter of refreshing the page or the table + the IF.

This probably will take care of it.

Cheers.


Solution

Richard Pearce wrote:

Nikhil Gaur wrote:

Hi Richard,

That is very simple. You can add a style or css attribute on your table. See below images

For setting style attribute


For setting class property (you have to create a css class (in your theme/ screen) for this first):

Thanks Nikhil,

I presume that 'Valid' is a local boolean variable ?  Also, how to display the error message and to "switch off" the error formatting and message ?

Cheers, Richard.

Hi Richard,

Yes, valid is a local boolean variable.

For showing the error message you can add a container where you want to show the error message and use same boolean local variable (valid) with not keyword for the visible (in reactive web)/ display (in traditional web) property of the container. So if valid is false then error will be displayed else it will be hidden.


Hi Nikhil and Eduardo,

Sorry for not having replied for some time, I had to move on to something else before coming back to this.  Thanks very much for your help which provided exactly what I needed.

Cheers, Richard.