List Builder Detail View PropertiesDirty control class name

Description

When you have a List with an associated Detail View and you edit the data in one of the rows of the List, an icon (whose appearance you can customize) is shown in the List row to indicate that the List row has data that has been edited, but not yet synchronized.

Displaying 'Dirty' Controls 

You can indicate if the dirty fields in a List row that has been edited by specifying a custom CSS class to apply to the Detail View control if the field value has been edited.

For example in the image shown below, you can see that the first row in the List has been edited, and you can now also see that the field in that row that was edited was the city field that was changed to 'Frankfurt'.

images/dirtydetailviewfield_1.jpg

To indicate the CSS class that you want to apply to dirty fields, open the List builder and set the 'Dirty control class name' property.

images/dirtyfield.png

In the above example, the dirtyField CSS class was defined as follows:

.dirtyField {
    background: #f6f9c2;
}

For a video on dirty control class names you can watch this video, download the component, or follow the guide below.

Creating a Detail View with a Dirty Control Class 

  1. In the UX Builder open the Data Controls menu. Click on the [List] option to add a list control to the component.

    images/dirt.png
  2. In the properties section click the button next to the "List properties" property to open the List Builder.

    images/dirt2.png
  3. On the Data Source page select SQL as the Data Source Type.

    images/dirt3.png
  4. In the SQL Data Source section, set the Connection string property to the 'Northwind' database

    images/dirt4.png
  5. For the 'Table name' property select the 'Customers' table.

    images/dirt5.png
  6. Click the button next to the 'Field list' property and select the ContactName, Address, City, and Country fields.

    images/dirt6.png
  7. Set the Primary Key to ContactName

    images/dirt7.png
  8. Open the List Layout pane. Move the four data fields from the Available Fields list to the Columns in List using the blue > arrow. Click OK to close the List Builder.

    images/dirt8.png
  9. Open the Data Controls menu and click on the [TextBox] option to add a text box to the component. Give it the name ContactName to match the corresponding field name.

    images/dirt9.png
  10. Add a second [TextBox] control named 'Address' to the component

    images/dirt10.png
  11. Add a third [TextBox] control to the component named 'City'

    images/dirt11.png
  12. Add a final [TextBox] control to the component and name it 'Country'

    images/dirt12.png
  13. Highlight all four [TextBox] controls. On the UX Controls page open the Containers menu.

    images/dirt13.png
  14. Click on [Container] and from the 'Container Type' list select 'None'. Add the container around the four textbox controls.

    images/dirt14.png
  15. Open the UX Properties page. Scroll down the properties list to the CSS/SVG section.

    images/dirt15.png
  16. Click the button next to the 'Local CSS definitions' property.

    images/dirt16.png
  17. Open the 'Design' tab on the bottom of the CSS editor and click the green + button in the toolbar at the top of the editor.

    images/dirt17.png
  18. Add a class named '.dirtyField' to the 'Add Selector' box and click OK.

    .dirtyField
    images/dirt18.png
    The . denotes a CSS class.
  19. In the CSS Editor's Design 'Property' tab scroll down to the Color/Background properties and expand the 'Background' properties list.

    images/dirt19.png
  20. Click the button next to the Background Color property and select a color from the color picker. Click OK and OK again to close the CSS editor.

    images/dirt20.png
  21. Go back to the UX Controls page. Open the List Builder by highlighting the List Control and clicking on List properties again.

    images/dirt21.png
  22. Open the 'List Properties' pane and check the 'Has Detail View' property.

    images/dirt22.png
  23. Open the 'Detail View' pane that appears. In the Detail View Properties section set the Detail view type to 'Container'

    images/dirt23.png
  24. For the 'Detail view container' property select the name of the container that holds the four textbox controls, in this case CONTAINER_1.

    images/dirt24.png
  25. Click the button next to the 'Dirty control class name' property.

    images/dirt25.png
  26. In the CSS Class Name Selector double click on the 'dirtyField' class you defined. highlight it in the Selected CSS Class Names list and click OK.

    images/dirt26.png
  27. Click the button next to the Table properties property.

    images/dirt27.png
  28. Change the Primary key field(s) property to ContactName. Click OK and OK again to close the List Builder.

    images/dirt28.png
  29. Open the Defined Controls menu. Click the "List-Detail View-Buttons" option. Add this control underneath the container.

    images/dirt29.png
  30. Highlight the list control, 'list1', and check the 'Save' option and click OK.

    images/dirt30.png
  31. Click OK to close the List Builder and run the component in Live Preview. Click on a row in the List to view it in the Detail View.

    images/dirt31.png
  32. Make a change to one of the fields in the detail view and click the 'Save' button. You should see the field, now dirty, change its background color.

    images/dirt32.png