Forms for Jira
Ideal Forms decouple the Jira data from the form presentation. Fundamentally, to create a form you add a "field" and set its "control type". The control type will render a specific control to the form, and it will attempt to bind it to the "Data Source". The following describes each control type and its behaviors.
Attachment list will display a list of attachments in a table format. The layout is done with DIVs and the
DIVs all have CSS classes assigned to them. To alter the default layout of the table you can alter the styles by adding a custom type named "style"
and entering standard CSS in the custom type value.
Valid Properties
Control Type: "attachmentlist"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: "Attachment"
Outer Style: CSS that will style the outer container.
Inner Style: CSS that will style the inner container.
Default Styles: The attachments are layed out in a DIV table with styles. The default styles are:
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
CSS Reference:
.ijfAttachList{
border-top:solid lightblue 1px;
border-right:solid lightblue 1px;
border-bottom:solid lightblue 1px;
border-left:solid lightblue 1px;
border-spacing: 0;
width:100%;
}
.ijfAttachListHead{
display: table-row;
background:lightblue;
font-weight:bold;
width:100%;
}
.ijfAttachListHeadName{
display: table-cell;
text-align:center;
width:50%;
}
.ijfAttachListHeadAuthor{
display: table-cell;
text-align:center;
width:25%;
}
.ijfAttachListHeadDate{
display: table-cell;
text-align:center;
width:25%
}
.ijfAttachListRow{
display: table-row;
width:100%;
}
.ijfAttachListName{
display: table-cell;
text-align:left;
width:50%;
}
.ijfAttachListAuthor{
display: table-cell;
text-align:left;
width:25%;
}
.ijfAttachListDate{
display: table-cell;
text-align:left;
width:25%;
}
Attachment list will display a list of attachments in a table format. The layout is done with a grid control
and optionally, you can have a delete file action.
Valid Properties
Control Type: "attachmentlistgrid"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: "Attachment"
Outer Style: CSS that will style the outer container.
Inner Style: CSS that will style the inner container.
Field Styles: CSS that will style the inner container, "delete:true" for the delete option
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
Attachment managed will render a single control that manages one single file, by name. This effectively gives you
versioning. Meaning, you name the file you want uploaded and this will manage all the file uploads in a single
control.
Valid Properties
Control Type: "attachmentmanaged"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: NAME OF THE FILE, WITH EXTENSION, YOU WANT LOADED
Outer Style: CSS that will style the outer container.
Inner Style: CSS that will style the inner container.
Field Styles: CSS that will style the inner container.
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
Attachment upload adds a button to the page that when clicked will allow the user to select a file to upload.
Valid Properties
Caption: The text of the button
Control Type: "attachmentupload"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: "Attachment"
Styles: Under development, right now this style is fixed.
On Change: if set, function called on change.
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
A Button is just a simple button or link that when clicked will fire the on change event.
Valid Properties
Caption: The text of the button
Control Type: "button"
Cell: "row,column" in which to put the field. Example "5,2"
Label Style: If "link" then this button will display as a URL link
On Change: if set, function called on click.
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
A checkbox is a standard multi select control using checkboxes for the options.
Valid Properties
Caption: The label for the control, or "none" for nothing, or blank to inherit Jira label.
Control Type: "checkbox"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: Name of the Jira field to bind, option types: checkbox or multiselect.
Outer Style: CSS that styles the outer container
Inner Style: CSS that styles the inner container
Field Style: CSS that styles the field container, and optionally "columns:x" where x is number of columns. "required:true" if required
Label Style: CSS that styles the label
On Change: if set, function called on change.
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
History list will display a list of item changes in a table format. The layout is done with DIVs and the
DIVs all have CSS classes assigned to them, this control uses the same DIVs as the Comment list so alter those divs to change.
To alter the default layout of the table you can alter the styles by using
the style override in the javascript business rules section.
Valid Properties
Control Type: "commentlist"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: "Comment"
Outer Style: CSS that will style the outer container.
Inner Style: CSS that will style the inner container.
Default Styles: The attachments are layed out in a DIV table with styles. The default styles are:
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
Comment list will display a list of comments in a table format. The layout is done with DIVs and the
DIVs all have CSS classes assigned to them. To alter the default layout of the table you can alter the styles by using
the style override in the javascript business rules section.
Valid Properties
Control Type: "commentlist"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: "Comment"
Outer Style: CSS that will style the outer container.
Inner Style: CSS that will style the inner container.
Default Styles: The attachments are layed out in a DIV table with styles. The default styles are:
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
.ijfCommentList{
border-top:solid lightblue 1px;
border-right:solid lightblue 1px;
border-bottom:solid lightblue 1px;
border-left:solid lightblue 1px;
border-spacing: 0;
width:100%;
max-height:200px;
overflow-y:auto;
}
.ijfCommentListHead{
display: table-row;
background:lightblue;
font-weight:bold;
width:100%;
}
.ijfCommentListHeadName{
display: table-cell;
text-align:center;
width:70%;
}
.ijfCommentListHeadAuthor{
display: table-cell;
text-align:center;
width:15%;
}
.ijfCommentListHeadDate{
display: table-cell;
text-align:center;
width:15%
}
.ijfCommentListRow{
display: table-row;
width:100%;
}
.ijfCommentListName{
display: table-cell;
text-align:left;
width:70%;
}
.ijfCommentListAuthor{
display: table-cell;
text-align:left;
width:15%;
}
.ijfCommentListDate{
display: table-cell;
text-align:left;
width:15%;
}
A datebox is a standard date selector.
Valid Properties
Caption: The label for the control, or "none" for nothing, or blank to inherit Jira label.
Control Type: "datebox"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: Name of the Jira field to bind, option types: date or datetime.
Outer Style: CSS that styles the outer container
Inner Style: CSS that styles the inner container
Field Style: CSS that styles the field container, "required:true" if required
Label Style: CSS that styles the label
RegEx Valid: Standard regular expression not including the outer "/"
RegEx Mess: The message to display to the user if the regular expression is invalid
On Change: if set, function called on change.
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
A dropdown is a standard combo or dropdown control. It can show single select custom fields and single select system fields.
Valid Properties
Caption: The label for the control, or "none" for nothing, or blank to inherit Jira label.
Control Type: "dropdown"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: Name of the Jira field to bind, option types: single select list or checkbox type.
Outer Style: CSS that styles the outer container
Inner Style: CSS that styles the inner container
Field Style: CSS that styles the field container, and optionally "required:true" if required
Label Style: CSS that styles the label
On Change: if set, function called on change.
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
This is the EXTJS GRID panel control implemented using a custom type definition. The GRID definition is done at the
main administration menu in "Custom Types". Creating a custom type of type GRID will allow you to define columns and types
and validation rules for your values.
Also you must tell the Custom Type what field you will storing the data in. This field must be jira type TEXT MULTILINE and the
field must be available to the issue. Ideal Forms will store the JSON representation of the table in that Jira field.
Note: the underlying database type is CLOB.
Note: do not name the custom type the same name as the Jira Field storing the contents
Valid Properties
Control Type: "GRID"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: Name of the CUSTOM TYPE you created from the main screen
Outer Style: CSS that styles the outer container
Inner Style: CSS that styles the inner container
Field Style: CSS that styles the field container
Label Style: CSS that styles the label
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
Forms has a report function that allows you to download a Word file with dynamically embedded values from your issues.
The word reports are stored as "Custom Types" from the main administration form. The Word file is a normal docx word file
in which you include tags to output your issue values. The syntax for tags is {tagname} and you can format the tags however
you would like. Example tags include:
{Summary}
{Description}
{Due Date}
Valid Properties
Control Type:reportbutton
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: Name of the CUSTOM TYPE you created from the main screen
Outer Style: NA
Inner Style: NA
Field Style: NA
Label Style: NA
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
This is just simple HTML entered into the Data Source.
Valid Properties
Control Type: "html"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: HTML to display. Optionally include tags to display values, example: #{Summary}.
Outer Style: CSS that styles the outer container
Inner Style: CSS that styles the inner container
Field Style: CSS that styles the field container
Label Style: CSS that styles the label
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
This is an iframe control that will attempt to display the target. Depending on your server you may
not have much success getting it to render. Your server (Jira server) must be set to allow iframes to render.
Valid Properties
Control Type: "iframe"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: url to display
Outer Style: CSS that styles the outer container
Inner Style: CSS that styles the inner container
Field Style: CSS that will set size of the iFrame as well as scrolling etc.
Label Style: CSS that styles the label
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
The item list is an important control for displaying items in a table form. Item lists can be
from a standard Jira JQL query, or they can be child issues or related issues. In all cases item lists
can call a javascript function to filter the results after the primary list has been created.
Valid Properties
Control Type: "itemlist"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: a JQL query, or "children" for child issues or "related" for related issues
The JQL here is very powerful. Jira includes many functions you can include. Anything you can write in
JQL can be used here, and you can use memory variables in your query. (similar to SQL parameter binding.)
Example helpful JQLs: PARENT IN (#{key}) -> this will use the memory variable "key" and pull all children
Example helpful JQLs: project = PMM and cf[13819] = "#{EPMD Project}" -> this pulls PMM issues where custom field 13819 = form value "EPMD Project"
You can also set the number rows to return with a &maxResults=200 at the end of your JQL.
Outer Style: CSS that styles the outer container
Inner Style: CSS that styles the inner container
Field Style: CSS and optionally "paging", Ex: paging:10
Paging is important if your return list has a lot of rows. Paging will display the number of entries
on a page with controls to page forward and backward. You can also use paging to prevent paging from happening
by setting it to a very high number like 1000. Note, Jira's maximum return is 1000 rows in one page.
Label Style: CSS that styles the label
Tb. Col. Widths: A comma delimited list of widths for the display
Tb. Col. Heads: Overrides for the column headers
Tb. Dbl Clk: A form name or a javascript function. Will be invoked on a row double click
On Change: A form name or a javascript function. Will be invoked on a row single click
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
The item tree is a control for displaying items in a tree format. The tree nodes are determined by
the "links" of the Issue. The item tree control helps create links between issues using a right mouse click
to add children. Functionally, the objective is to add a tree structure from which you hang child nodes
that model data for your use case. This control can be used in a similar way to the Gantt chart of a project
management tool. The links are created to the same project, issue type.
Note: you have to include a custom field, type number, called "taskOrder" for the nodes to automatically order like a gantt chart
and for the "move up" and "move down" menu options to appear.
Valid Properties
Control Type: "itemtree"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: a JQL query
JQL is used here, and you can use memory variables in your query. (similar to SQL parameter binding.)
Example helpful JQLs: PARENT IN (#{key}) -> this will use the memory variable "key" and pull all children
Example helpful JQLs: project = PMM and cf[13819] = "#{EPMD Project}" -> this pulls issues where custom field 13819 = form value "EPMD Project"
You can also set the number rows to return with a &maxResults=200 at the end of your JQL.
Outer Style: CSS that styles the outer container
Inner Style: CSS that styles the inner container
Field Style: CSS and optionally "paging", Ex: paging:10
Paging is not enabled for this control yet, so the max results must be used to pull up to 1000 issues
Label Style: CSS that styles the label
Tb. Col. Widths: A comma delimited list of widths for the display
Tb. Col. Heads: Overrides for the column headers
Tb. Dbl Clk: A form name or a javascript function. Will be invoked on a row double click
On Change: A form name or a javascript function. Will be invoked on a row single click
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
This places a set of three buttons on the screen: Save, Reload and Done. Any of these can be renamed
and hidden. The Save will save changed fields. Reload will reload the issue and rerender the form and
Done will navigate to the Form Group "default" form or it will render the form set in "Data Source". Note, this button is not
to be used for Pop-Up forms, use formbuttonsforpopup for that.
Valid Properties
Control Type: "formbuttons"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: A form to open when "Done" is clicked, if blank default form from Form Group will be rendered
Outer Style: A comma separated list of labels to override names. Also used to suppress a button. Example: ",,Home" will show
one button "Home" that will invoke the "Done" function
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
This places a set of three buttons on the screen: Save, Save/Done and Done. These buttons are only
for use on popup forms because their behavior is specific to popup form behavior. The behavior is:
Save: Saves the form, does not close. If the form is an Add type, it will switch behavior to an Edit type
Save/Done: Saves the form and closes dialog.
Done: Closes the form with no save.
Valid Properties
Control Type: "formbuttonsforpopup"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: A form to open when "Done" is clicked, if blank default form from Form Group will be rendered
Outer Style: A comma separated list of labels to override names. Also used to suppress a button. Example: ",,Home" will show
one button "Home" that will invoke the "Done" function
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
A multi select is a control that allows multiple value selection. This control can show custom multi select fields as well as
system fields like Version and Component.
Valid Properties
Caption: The label for the control, or "none" for nothing, or blank to inherit Jira label.
Control Type: "multiselect"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: Name of the Jira field to bind, option types: multi select or checkbox.
Outer Style: CSS that styles the outer container
Inner Style: CSS that styles the inner container
Field Style: CSS that styles the field container, and optionally "required:true" if required
Label Style: CSS that styles the label
On Change: if set, function called on change.
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
A Button or link that when clicked will render a form. If a "navigatetoform" button is rendered
on a form, and that button's target form is the same as the one rendering, then the button will render highlighted.
Valid Properties
Caption: The text of the button
Control Type: "navigatetoform"
Cell: "row,column" in which to put the field. Example "5,2"
Label Style: If "link" then this button will display as a URL link
On Change: if set, function called on click.
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
A subform is a field that renders another form within this form. Subforms are any other form. Sub forms can have sub forms. Sub forms are
rendered seamlessly by default, optionally you can add style directives that will wrap the subform in an accordion with title.
Valid Properties
Control Type: "subform"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: Name of the form to render.
Outer Style: custom styles that optionally style the subform, the default is seamless. For example the following sets a containing accordian:
collapsible:true;panelTitle:Expand for the #{key} comments;collapsed:true
Inner Style: CSS that styles the inner container
Field Style: CSS that styles the field container, and optionally "required:true" if required
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
A simple button or link that when clicked will open a new window to a URL.
Valid Properties
Caption: The text of the button
Control Type: "openurl"
Cell: "row,column" in which to put the field. Example "5,2"
Label Style: If "link" then this button will display as a URL link
On Change: if set, function called on click.
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
A popform is a button that when clicked opens another form in a popup window the context of the popform is the same as the owning window. Size and other
characterstics are determined by the form being popped up.
Valid Properties
Control Type: "openpopform"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: Name of the form to pop up. The target form will set the size and style of the popup
Label Style: If "link" then this button will display as a URL link
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
A radio is a standard single select control using radio group for the options. Radios can also control
system single select fields like Status and Priority.
Valid Properties
Caption: The label for the control, or "none" for nothing, or blank to inherit Jira label.
Control Type: "radio"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: Name of the Jira field to bind, option types: radio or dropdown.
Outer Style: CSS that styles the outer container
Inner Style: CSS that styles the inner container
Field Style: CSS that styles the field container, and optionally "columns:x" where x is number of columns. "required:true" if required
Label Style: CSS that styles the label
On Change: if set, function called on change.
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
Tab menu renders a set of tab buttons. Each tab button will function as a navigate to form or a javascript entry point. The syntax of the
buttons uses JSON in the "Data Source" field. The following example uses this settings:
[["List","Simple Form Item List"],["Run Function","snippet:helloWorld"],["Simple Form","Simple Form with Subform"],["Another Form","Simple Form Multi Select"]]
Valid Properties
Caption: The label for the control, or "none" for nothing, or blank to inherit Jira label.
Control Type: "tabmenu"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: JSON buttons and settings
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
A text area is a standard text area that shows multiple lines of text.
Valid Properties
Caption: The label for the control, or "none" for nothing, or blank to inherit Jira label.
Control Type: "textarea"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: Name of the Jira field to bind, option types: date or datetime.
Outer Style: CSS that styles the outer container
Inner Style: CSS that styles the inner container
Field Style: CSS that styles the field container, "required:true" if required
Label Style: CSS that styles the label
RegEx Valid: Standard regular expression not including the outer "/"
RegEx Mess: The message to display to the user if the regular expression is invalid
On Change: if set, function called on change.
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
A text area is a standard text area that shows single line of text.
Valid Properties
Caption: The label for the control, or "none" for nothing, or blank to inherit Jira label.
Control Type: "textbox"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: Name of the Jira field to bind, option types: date or datetime.
Outer Style: CSS that styles the outer container
Inner Style: CSS that styles the inner container
Field Style: CSS that styles the field container, "required:true" if required
Label Style: CSS that styles the label
RegEx Valid: Standard regular expression not including the outer "/"
RegEx Mess: The message to display to the user if the regular expression is invalid
On Change: if set, function called on change.
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.
This control provides a picklist of users. It can set a custom user picker field or the Assignee. If
the target list will be limited to the allowed assignees or open for a general picker.
Valid Properties
Caption: The label for the control, or "none" for nothing, or blank to inherit Jira label.
Control Type: "userpicker"
Cell: "row,column" in which to put the field. Example "5,2"
Data Source: Name of the Jira field to bind, option types: date or datetime.
Outer Style: CSS that styles the outer container
Inner Style: CSS that styles the inner container
Field Style: CSS that styles the field container, "required:true" if required
Label Style: CSS that styles the label
RegEx Valid: Standard regular expression not including the outer "/"
RegEx Mess: The message to display to the user if the regular expression is invalid
On Change: if set, function called on change.
renderIf: if set, function called that returns true or false, if false will be hidden.
Before Render: function called just before rendering.
After Render: function called just after rendering.