Using Javascript Functions and Demo

It is also possible to apply some style to a particular component at some particular time, by using the javascript function "SetStyleClassName(UserClassName)" to a given component.

Note: "SetStyleClassName" is available in all events and components (except for RadioButtonGroups)

As an example, we can use the following json string:

[
  {
    "ClassName": "TextBox",
    "Conditional": [
      {
        "Condition": "Empty",
        "HighlightFillColor": "#0000FF70",
        "HighlightStrokeColor": "#00FF00FF",
        "HighlightStrokeThickness": 10,
        "BackgroundColor": "0,255,0"
      }
    ]
  },
    {
    "ClassName": "RedBorder",
    "Conditional": [
      {
        "Condition": "Enable",
        "HighlightFillColor": "#0000FF70",
        "HighlightStrokeColor": "#FF0000FF",
        "HighlightStrokeThickness": 10,
        "BackgroundColor": "0,255,0"
      }
    ]
  }
]

As a result, if we set the "eform.jsonstyle" parameter to that json string:

// OnStartUp event on ReportTemplate Component
This.SetReportOption("eform.stylejson", '[{"ClassName":"TextBox","Conditional":[{"Condition":"Empty","HighlightFillColor":"#0000FF70","HighlightStrokeColor":"#00FF00FF","HighlightStrokeThickness":10,"BackgroundColor":"0,255,0"}]},{"ClassName":"RedBorder","Conditional":[{"Condition":"Enable","HighlightFillColor":"#0000FF70","HighlightStrokeColor":"#FF0000FF","HighlightStrokeThickness":10,"BackgroundColor":"0,255,0"}]}]');

Once we render the form, all textboxes will be styles according to the "ClassName:Textbox" styling. Also, with javascript we can restyle any component by applying to it the customized "ClassName:RedBorder" styling. For example, if we want to restyle the component when clicking on a button:

// OnClick event of a button component
var textbox = This.GetInputComponent("textbox1");
textbox.SetStyleClassName("RedBorder");

Demo

You can test the functionality with the previous configuration in the following link: https://osd.forcs.com.sg/demo/eform_stylejson.html