How to apply css style to view on button click, button is present in a form

Good day veenar

Please see the below steps on how to obtain the requested behavior, please keep in mind the explanation and steps below are focused on Item views on a form however List views would behave the same.

Steps:

1) Add a data label to your form, ensure its literal property is checked and that the prevent xss property is unchecked.

2) Create a new expression and add "one" the following code snippet into the expression according to your requirements:

2.1) to change css styling for all items views on the form

<script>$('.view').find('.panel-body').css({"background-color": "red"});</script>

2.2) to change css styling for certain item views on the form

<script>$('.view').find('#1899dec3-9147-4c24-8e45-20111f683631_c153471c-40ff-496c-9aa2-fc0d31c01f33_bb6be4be-8813-4e8c-95f6-090b30b9d9d8_7e3d5f2b-33d4-499d-b02f-2a1075d28c29').find('.panel-body').css({"background-color": "red"});</script>

Note: The ID section in this code snippet needs to be replaced with your specific views ID. Example: Replace ".find('#1899dec3-9147-4c24-8e45-20111f683631_c153471c-40ff-496c-9aa2-fc0d31c01f33_bb6be4be-8813-4e8c-95f6-090b30b9d9d8_7e3d5f2b-33d4-499d-b02f-2a1075d28c29')" with ".find('#YOUR ITEM VIEWS ID')".

Note: These sections found in the code snippet ".css({"background-color": "red"});" can be altered to inject the styling you need, example: This ".css({"background-color": "red"});" would eject a background of red where this would inject abackground of red and add a dashed boreder style".css({"background-color": "red", "border-style": "dashed"});".

3) Add your button. On the button add a rule that would call a "transfer data" rule once the "button is clicked"

"Configure" the Transfer data rule to pass the created expression to the added data label (this will fire the code).

4) Save, finish and run the form.

Result:

When you press the button the code contained in the expression will be passed to the data label which is set to allow literal input, this will then execute the code rendering your styling into the view on a form button click.

Should you feel that this post is of use and or an accurate solution to the raised question, I kindly encourage you to mark it as such using the 'Mark as Solution', 'Kudo' andor ‘Me Too’ options.

Kind Regards

Raymond