Dev Tools

The Dev Tools property in the Create Form activity allows users to debug their forms and experiment with CSS styles. When enabled, the Dev Tools developer tool opens at runtime.

This tutorial shows how to experiment with CSS styles in Dev Tools.

Important: Customizations added in Dev Tools are temporary. To permanently apply the CSS styles to the form, you have to create a custom CSS class in an HTML Element component, where you input the code that you experiment with in Dev Tools.

Tutorial

To use Dev Tools:

In the Properties panel of the Create Form activity, check:
1. Dev Tools
2. DisableSanitize. This property improves the performance of the form.
Add form components in the Form Designer. For this example, drag and drop a HTML Element component. You use this component to customize the appearance of other form components
1. In the Display tab of the HTML Element component, go to the Content section.
2. Input a CSS <style>class that changes the appearance of other components. Write the <style> tag and then a name for the class.
  
  Remember the name of the CSS class because you will use it to apply CSS styles to other form components.
3. 2.3. Add properties to the CSS class that match your use-case For this example, add the background-color property and set it as green. See the CSS code below:
```
<style> .customclass{background-color: green;} </style><style> .customclass{background-color: green;} </style>
```
4. 2.4. Save the component.
Drag and drop a Text Field component in the Form Designer.
1. In the Display tab, go to the Custom CSS Class field and input the name of the CSS class created in the HTML Element. For this example type customclass.
2. Save the component and the form.
Run the file. The Dev Tools window opens.
1. Click the following icon and then select the Text Field component in the Form Renderer. The CSS class created shows in the Styles tab of Dev Tools. For this example, the customclass shows.
2. Go to the CSS class created in Dev Tools and start experimenting with CSS styles in real-time. For this example, add a border-style property inside customclass and set it to solid.
3. Add another border-color property and set it to deeppink.
After experimenting with CSS styles, you can apply them to your form permanently. Go to the Content section of the HTML Element component and add the properties you experimented with in the CSS class.

For this example, add the border-style and border-color properties in customclass:
```
<style> .customclass{background-color: green;
  border-style: solid;
  border-color: deeppink;}
</style><style> .customclass{background-color: green;
  border-style: solid;
  border-color: deeppink;}
</style>
```
Save the component and the form.