Page History

...

Code Block

<ac:structured-macro ac:macro-id="564ab3d6-7c49-45c5-9e17-74c492fc1828" ac:name="confiform" ac:schema-version="1">
  <ac:parameter ac:name="formName">myform</ac:parameter>
  <ac:rich-text-body>
    <ac:structured-macro ac:macro-id="62cbf463-6860-4769-a16b-9dcc086910b3" ac:name="confiform-entry-register" ac:schema-version="1">
      <ac:parameter ac:name="embedded">true</ac:parameter>
      <ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
      <ac:rich-text-body>
        <p>
          <br/>
        </p>
      </ac:rich-text-body>
    </ac:structured-macro>
    <p>
      <ac:structured-macro ac:macro-id="8c774cc4-b415-47eb-bb28-8cd31891f4ba" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">makeRequired</ac:parameter>
        <ac:parameter ac:name="fieldLabel">Make required</ac:parameter>
        <ac:parameter ac:name="type">checkbox</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="a1c484ce-abea-4ef8-a70f-41f718bd7337" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">myfield</ac:parameter>
        <ac:parameter ac:name="fieldLabel">myfield</ac:parameter>
        <ac:parameter ac:name="type">text</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <br/>
    </p>
    <ac:structured-macro ac:macro-id="c95709e3-984a-407f-b346-780d806f0542" ac:name="confiform-field-definition-rules" ac:schema-version="1">
      <ac:parameter ac:name="condition">makeRequired:true AND myfield:[empty]</ac:parameter>
      <ac:parameter ac:name="fieldName">myfield requires a value to be set when "makeRequired" field is checked</ac:parameter>
      <ac:parameter ac:name="action">Validation rule</ac:parameter>
    </ac:structured-macro>
    <p>
      <br/>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>

We can extend this demo to have a "required asterisk" when the field is set to be required

Here is how.

ConfiForms has the required label rendered by adding the following "span" HTML element

Code Block
<span style="color:red;font-weight: bolder;float: right;font-size: larger;">* </span>

We can set up couple of rules to add/remove this element via JavaScript

Script is quite simple

No Format

<script type="text/javascript">
  function makeRequired(formName, formId){ 
    var myFieldLabel = AJS.$('#' + formId).find('#i_labelfor_myfield'); 
    AJS.$(myFieldLabel).find('span').remove(); 
    AJS.$(myFieldLabel).append('<span style="color:red;font-weight: bolder;float: right;font-size: larger;">* </span>'); 
  }
 
  function removeRequired(formName, formId){ 
    var myFieldLabel = AJS.$('#' + formId).find('#i_labelfor_myfield'); 
    AJS.$(myFieldLabel).find('span').remove(); 
  } 
</script>

And you invoke it via ConfiForms Field Definition Rule called "Run custom JavaScript"

Image Added

Here is a complete storage format for this configuration

Code Block

<ac:structured-macro ac:macro-id="564ab3d6-7c49-45c5-9e17-74c492fc1828" ac:name="confiform" ac:schema-version="1">
<ac:parameter ac:name="formName">myform</ac:parameter>
<ac:rich-text-body>
<ac:structured-macro ac:macro-id="62cbf463-6860-4769-a16b-9dcc086910b3" ac:name="confiform-entry-register" ac:schema-version="1">
<ac:parameter ac:name="embedded">true</ac:parameter>
<ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
<ac:rich-text-body>
<p>
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p>
<ac:structured-macro ac:macro-id="8c774cc4-b415-47eb-bb28-8cd31891f4ba" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">makeRequired</ac:parameter>
<ac:parameter ac:name="fieldLabel">Make required</ac:parameter>
<ac:parameter ac:name="type">checkbox</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="ed13465f-eeaa-45ea-a26d-30985d6bdd93" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">myfield</ac:parameter>
<ac:parameter ac:name="fieldLabel">myfield</ac:parameter>
<ac:parameter ac:name="type">text</ac:parameter>
</ac:structured-macro>
</p>
<p>
<br/>
</p>
<ac:structured-macro ac:macro-id="c95709e3-984a-407f-b346-780d806f0542" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="condition">makeRequired:true AND myfield:[empty]</ac:parameter>
<ac:parameter ac:name="fieldName">myfield requires a value to be set when "makeRequired" field is checked</ac:parameter>
<ac:parameter ac:name="action">Validation rule</ac:parameter>
</ac:structured-macro>
<p>
<ac:structured-macro ac:macro-id="cef33c61-81fd-4f4c-976c-390ff31f1a9f" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="condition">makeRequired:true</ac:parameter>
<ac:parameter ac:name="values">makeRequired(formName, formId);</ac:parameter>
<ac:parameter ac:name="action">Run custom JavaScript</ac:parameter>
<ac:parameter ac:name="actionFieldName">makeRequired</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="2fbf9094-c766-43c5-bd7e-2d7ce9be0c14" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="condition">makeRequired:false</ac:parameter>
<ac:parameter ac:name="values">removeRequired(formName, formId);</ac:parameter>
<ac:parameter ac:name="action">Run custom JavaScript</ac:parameter>
<ac:parameter ac:name="actionFieldName">makeRequired</ac:parameter>
</ac:structured-macro>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<ac:structured-macro ac:macro-id="c478a814-3778-4afd-9071-d0b47d254eea" ac:name="html" ac:schema-version="1">
<ac:plain-text-body><![CDATA[<script>
function makeRequired(formName, formId){
var myFieldLabel = AJS.$('#' + formId).find('#i_labelfor_myfield');
AJS.$(myFieldLabel).find('span').remove();
AJS.$(myFieldLabel).append('<span style="color:red;font-weight: bolder;float: right;font-size: larger;">* </span>');
}
function removeRequired(formName, formId){ 
var myFieldLabel = AJS.$('#' + formId).find('#i_labelfor_myfield'); 
AJS.$(myFieldLabel).find('span').remove(); 
}
</script>]]></ac:plain-text-body>
</ac:structured-macro>

Page tree

Versions Compared

Old Version 2

New Version 3

Key