The Heading control is used to add visually appealing headings and titles to the form. Choose the appearance of the header from a predefined list or style it to your liking using CSS.
This page contains a detailed description of the control properties and JavaScript samples which you can use with this control.
Here you can find properties specifically related to the Heading control.
A unique identifier for the control.
JavaScript
The Name property allows to work with the control via JavaScript code, like this:
fd.rendered(function(){
//can access the control using its Name:
fd.control('Text1').heading = 'New text for the Heading control';
});
The property defines the appearance of the heading on the form:
You can choose from the list of predefined options:
Normal
Line
Underline 1
Underline 2
The property defines the style of the text:
You can define:
the ranking level of the heading from H1 to H4,
the color of the text,
the aligmnet,
the text style.
Add a CSS class to the control, which comes in handy with CSS or even JavaScript code. This will work as a class attribute for an HTML tag:
The same class can be applied to multiple fields and controls, and then you can use CSS to modify the appearance of these.
Add custom CSS style to the control. This will work as a style attribute for an HTML tag:
You can apply different styles to the control. For example, the following style will add a shadow under the control:
box-shadow: 0 9px #999;
In this section, you can find basic examples of how to work with the control using JavaScript.
If you are not familiar with the JavaScript framework, get started with the JavaScript basics.
Note
The control is only accessible once the form is rendered, so all calls to the control must be inside fd.rendered event:
fd.rendered(function(){
//hide the control
fd.control('Control1').hidden = true;
//show the control
fd.control('Control1').hidden = false;
});
Get or set the text of the heading with the following property:
//return the heading as a string fd.control('Control1').heading; //set the heading fd.control('Control1').heading = 'New text for the heading';
Get or set the text of the subheading with the following property:
//return the subheading as a string fd.control('Control1').subheading; //set the subheading fd.control('Control1').subheading = 'New text for the subheading';
Access HTML element inside the control in order to modify it, hide it, or do something else.
//access control's HTML var htmlControl = fd.control('Control1').$el;
Hide a control from a user. The control value can still be accessed and changed with JavaScript.
//hide control fd.control('Control1').hidden = true; //show control fd.control('Control1').hidden = false;
Set the background color of the control:
//with valid color name fd.control('Control1').fill = 'red'; //with a HEX value fd.control('Control1').fill = '#009688'; //with an RGB value fd.control('Control1').fill = 'rgb(255,0,0)';
Set the ranking level of the heading from H1 to H4:
fd.control('Control1').size = 'H4';
Set the appearance of the heading on the form:
fd.control('Control1').view = 'Underline2';