How to create conditional checkbox ?

RE: How to create conditional checkbox ?

Mike Schmitt — Tue, 05 Sep 2017 14:45:26 GMT

As said, there should be enough info here already for you to go on. I guess my one last suggestion now that you've moved back to a nested CDT approach is, you don't need the JSON stuff anymore, and an approach somewhat closer to my original code should work (just need to take care of the extra new fields you've added).

RE: How to create conditional checkbox ?

PhilB — Tue, 05 Sep 2017 09:58:46 GMT

Having reached nearly 50 replies on this thread alone (and a not inconsiderable quantity of code), there's more than enough information to complete this requirement in this post, the other post regarding data structures, and the documentation.

FYI, the answer to the latest point is pretty much "use dot notation", which, again, is explained in Appian's extensive documentation.

RE: How to create conditional checkbox ?

prais1852 — Tue, 05 Sep 2017 07:07:36 GMT

Hi Sorry to disturb you again for the same problem. As you know i had to change my CDT to maintain DB naming convention of tables and columns. Can you please help me now with the original requirment ?

Attached are 3 CDTs that i have created. 1 parent and 2 child which have 1 to many relationship.

To give you idea CCCNumber in my Parent CDT is a PK and auto-incremented filed. Similarly NodesAffectedID and ToolsAffectedID in other 2 CDTs.

NodesAffectedCCCNumber and ToolsAffectedCCCNumber are Foreign key which map to CCCNumber. So as soon as user enters the record i want NodesAffectedCCCNumber and ToolsAffectedCCCNumber to be same as CCCNumber because then only i will get a joining condition to query from my DB and get 1 to many relationship result. I know you suggested JSON approch to make checkboxes filed work when i was using Text array but know i am using Nested CDT. Can you please still be able to help me for the last time ?

Let me know if you need any other information on this.

RE: How to create conditional checkbox ?

prais1852 — Fri, 01 Sep 2017 14:03:37 GMT

You are awesome. It worked. Thanks a lot.

RE: How to create conditional checkbox ?

Mike Schmitt — Fri, 01 Sep 2017 13:34:21 GMT

Since I'm feeling generous, I went back to my old example and converted it to be able to store its saved values in a new CDT containing fields pretty much exactly like yours:

I'm doing the JSON conversion like I referenced in my prior reply - notice that I created a new WITH variable which checks whether there's any value in the "Size" array (in your version that would be "NodesAffected"), and if so, translates each one back from a JSON string to dictionary data (like was originally used in my original version); then in the checkbox field, it uses this local variable for display, but saves directly into ri!menuSelectionCdt.Size (converting the saved values into a JSON string prior to storing them in the text varray). You should be able to translate this pretty much directly into your use case.

load(

  local!restaurantChoices: {
    {id: 1, name: "KFC"}, 
    {id: 2, name: "Pizza Hut"}
  },
  local!selectedRestaurant,
  local!menuSelection: {},
  
  /*local!menuSelectionSizes: {},*/
  
  with(
    
    /* dynamically set the menu choices based on which restaurant is picked */
    local!menuChoices: if(
      isnull(ri!menuSelectionCdt.RestaurantSelected),
      {},
      if(
        tointeger(ri!menuSelectionCdt.RestaurantSelected) = 1,
        {
          "Fried Chicken", "Mashed Potatoes", "Cole Slaw", "Biscuits", "Gravy"
        },
        if(
          tointeger(ri!menuSelectionCdt.RestaurantSelected) = 2,
          {
            "Pizza", "Bread Sticks", "Salad Bar", "Soft Drinks"
          },
          {}
        )
      )
    ),
    
    
    /* set up Menu Selection Sizes to be an array of dictionary -
      the format will resemble this: 
      {
        item: "item name",
        size: {sizeIds}
      }
    */
    
    /* NEW: so we can store these selections safely in a TEXT cdt value, we 
    will convert them to JSON strings for storage in the CDT, and back
    into dictionary data for use in the form. */    
    local!menuSelectionSizes: if(
      apn_isEmpty(ri!menuSelectionCdt.Size),
      {},
      apply( /* since there will be a separate JSON string for each menu selection */
        a!fromJson,
        ri!menuSelectionCdt.Size
      )
    ),
    
    a!formLayout( 
    /* now assuming 17.2 or newer */
      
      contents: {
        a!radioButtonField(
          label: "Chain:",
          labelPosition: "ADJACENT",
          choiceLabels: local!restaurantChoices.name,
          choiceValues: local!restaurantChoices.id,
          value: ri!menuSelectionCdt.RestaurantSelected,
          saveInto: {
            ri!menuSelectionCdt.RestaurantSelected,
            
            /* the below will clear the previous menu selection when the restaurant is changed */
            a!save(
              ri!menuSelectionCdt.MenuSelections,
              {}
            )
          }
        ),
        
        if(
          not(isnull(ri!menuSelectionCdt.RestaurantSelected)),
          a!checkBoxField(
            label: "Make your food choices:",
            labelPosition: "ADJACENT",
            choiceLabels: local!menuChoices,
            choiceValues: local!menuChoices,
            value: ri!menuSelectionCdt.MenuSelections,
            saveInto: {
              a!save(
                ri!menuSelectionCdt.MenuSelections,
                /* this weird saveInto style will attempt to keep the saved value array in the same order as the
                initial checkboxes, since Appian versions 17.1 and later no longer do this automatically */
                index(
                  local!menuChoices,
                  whereContains(
                    save!value,
                    local!menuChoices
                  )
                )
              )
            }
          ),
          {}
        ),
        a!columnsLayout(
          columns: a!forEach(
            ri!menuSelectionCdt.MenuSelections,
            with(
              local!currentIndex: wherecontains(
                fv!item,
                touniformstring(property(local!menuSelectionSizes, "item", {}))
              ),
              a!columnLayout(
                contents: {
                  a!checkboxField(
                    label: "Select Size: '" & fv!item & "'",
                    labelPosition: "ABOVE",
                    choiceLabels: {"Small", "Medium", "Large"},
                    choiceValues: {1, 2, 3},
                    value: tointeger(
                      property(
                        index(
                          local!menuSelectionSizes,
                          local!currentIndex,
                          null()
                        ),
                        "sizes",
                        null()
                      )
                    ),
                    saveInto: {
                      a!save(
                        ri!menuSelectionCdt.Size,
                        append(
                          if(
                            isnull(local!currentIndex),
                            ri!menuSelectionCdt.Size,
                            remove(ri!menuSelectionCdt.Size, local!currentIndex)
                          ),
                          if(
                            apn_isEmpty(save!value),
                            /* indicates all size choices have been de-selected, so we'll save an empty set here to remove this menu choice from the saved data set */
                            a!toJson({}),
                            a!toJson(
                              {
                                item: fv!item,
                                sizes: save!value
                              }
                            )
                          )
                        ) 
                      )
                    }
                  )
                }
              )
            )
          )
        ),
        
        a!paragraphField(
          label: "(debug info)",
          value: "Menu Selection Size choices converted back from JSON: " & char(10) & local!menuSelectionSizes
        ),
        
        {}
      } 
    )
  )
)

RE: How to create conditional checkbox ?

prais1852 — Fri, 01 Sep 2017 13:27:45 GMT

If i would like to go with saving in JSON string. How can i do that ? Can you share some links for help if possible ? I am really scared of dealing with Nested CDTs, Managin CDTs is tough for me.

RE: How to create conditional checkbox ?

Mike Schmitt — Fri, 01 Sep 2017 13:13:05 GMT

One initial issue I see in your code & cdt definition is: when you're saving into ri!CCC.NodesAffected, my original rule is assuming the local variable (local!menuSelectionSizes) is capable of holding dictionary data - i'm saving {item: fv!item, sizes: save!value} -- you're doing the same thing (except turned into Tool/Nodes), except the data type you're saving it into is Text, not Dictionary or CDT or "Any Type".

You might want to consider making a new CDT consisting of the fields "Tool" (single) and "Nodes" (multiple), and switching the NodesAffected property in your original CDT to be of that new type (also multiple). After that your saves might work.

If you have the need to not do a nested CDT, however, you could also consider converting the value being saved into a JSON string, which you can store in a single text field like your CDT already has, except that would require conversion to be done both at saving and at loading time.

RE: How to create conditional checkbox ?

prais1852 — Fri, 01 Sep 2017 10:37:46 GMT

Sure no problem Thanks for your efforts.

RE: How to create conditional checkbox ?

prais1852 — Fri, 01 Sep 2017 05:28:11 GMT

Hi i guess you missed the full conversation. Version is not a point of worry now. It's just some feature which are not working with rule input in 17.2 but working with local variables.

RE: How to create conditional checkbox ?

aloks0189 — Fri, 01 Sep 2017 05:21:30 GMT

prais1852 First of all, migrating from Higher Version to Lower version is never a good approach. Because this require lot of changes to be done in your application.

Now coming back to your requirement, there are no alternative for a!columnsLayout(). Till 17.1 version, we had max 2 columns for each UI, while UI designing, whereas from 17.2 on-wards a!columnsLayout() added more flexibility to have multiple columns as per our need.

So, if you have switched from 17.2 to 17.1, i recommend change your layouts and their contents. And also replace all those functions which are introduced in 17.2 with their similar one in 17.1 as already been discussed above

RE: How to create conditional checkbox ?

Mike Schmitt — Thu, 31 Aug 2017 21:18:29 GMT

Sorry, was a bit busy today - i'll try to take a look at it tomorrow.

RE: How to create conditional checkbox ?

prais1852 — Thu, 31 Aug 2017 15:28:00 GMT

Hi Can you please help me now ?

RE: How to create conditional checkbox ?

prais1852 — Wed, 30 Aug 2017 19:53:03 GMT

Hi Thank you for your help. Here are the details -

Something like the below attached screenshot i am trying to achieve on my interface -

Where Product Group Affected has a dropdown value coming from constant, Tools affected values are coming from an expression rule based on Product Group affected selection and finally foreach() loop for Nodes Affected for each Tool. But Nodes Affected checkbox selections are not working for me. Below is the code for it which i am using by replacing local variables with rule input.

a!dropdownField(
    		label: "Product Group Affected",
    		labelPosition: "ABOVE",
    		placeholderLabel: "--- Select a Value ---",
    		choiceLabels: cons!CCCProductGroupAffectedOptions,
    		choiceValues: cons!CCCProductGroupAffectedOptions,
    		value: ri!CCC.ProductGroupAffected,
    		saveInto: {
      		ri!CCC.ProductGroupAffected,
    		/* the below will clear the previous Tools Affected Selection when the Product Group Affected is changed */
              		a!save(
                		ri!CCC.ToolsAffected,
                		{}
              		)
             		},
    		validations: {}
  		),
		
  		a!checkboxField(
    		label: "Tools Affected",
    		labelPosition: "ABOVE",
        choiceLabels: rule!CCCToolsAffectedOptions(ri!CCC.ProductGroupAffected),
        choiceValues: rule!CCCToolsAffectedOptions(ri!CCC.ProductGroupAffected),
    		value: ri!CCC.ToolsAffected,
    		saveinto: ri!CCC.ToolsAffected,  
        /*ChoiceLayout: "COMPACT",/*STACKED*/
    		showwhen: not(isnull(ri!CCC.ProductGroupAffected)),
    		validations: {}
    		),
			a!columnsLayout(
			columns: a!forEach(
				ri!CCC.ToolsAffected,
				with(
					local!currentIndex: wherecontains(
					fv!item,
					touniformstring(property(ri!CCC.NodesAffected, "Tool", {}))
				),
		
        a!columnLayout(
					contents: {
          	a!checkboxField(
              label: "Nodes Affected for : '" & fv!item & "'",
              labelPosition: "ABOVE",
              /*instructions: "current index: " & local!currentIndex,*/
              choiceLabels: cons!CCCNodesAffectedOptions,
              choiceValues: cons!CCCNodesAffectedOptions,
              value: tointeger(
              property(
                  index(
                    ri!CCC.NodesAffected,
                    local!currentIndex,
                    null()
                   ),
                   "Nodes",
                   null()
                 )
               ),
               saveInto: {
                 a!save(
                   ri!CCC.NodesAffected,
                     append(
                       if(isnull(local!currentIndex),
                         ri!CCC.NodesAffected,
                         remove(ri!CCC.NodesAffected, local!currentIndex)
                        ),
                        if(
                            rule!APN_isEmpty(save!value),
                            /* indicates all size choices have been de-selected, so we'll save an empty set here to remove this menu choice from the saved data set */
                            {},
                            {
                              Tool: fv!item,
                              Nodes: save!value
                            }
                          )
        							)
      						)
    						}
  						)
    				}
  				)
  			)
  		),
		  showwhen: not(isnull(ri!CCC.ProductGroupAffected))
		),

I am using a interface input named CCC of type CDT. To get the checkbox values Tools Affected and Nodes Affected i have made as an Array.

Let me know if you need any other information. I tried a lot to debug the issue but wasn't able to figure out and looking for help.

RE: How to create conditional checkbox ?

Mike Schmitt — Wed, 30 Aug 2017 14:14:44 GMT

I really can't help much more if you can't give me some further details about your exact configuration including screenshots of your SAIL rule input configurations, etc. Have you tried reverting to the working code I'd posted, and try replacing local variables with Rule Inputs one at a time and making sure it works at each step?

Also, you need to get familiar with the support documentation available here - for example the property function is described here: docs.appian.com/.../fnc_scripting_property.html -- in short, the property() function is used to extract a "property" (as in "dot property") from a CDT or Dictionary, in a safe manner such that a default output can be returned if the property doesn't exist (i.e. if ri!myUser.firstName doesn't exist, property(ri!myUser, "firstName", "none") will return "none").

RE: How to create conditional checkbox ?

prais1852 — Wed, 30 Aug 2017 12:40:21 GMT

Hi It works only when i click all the checkboxes before page reloads with selected options. I checked on the interface also. The values are getting inserted in the interface input but once i click on any other text field of my form the checkbox selection gets removed.

If you can explain the use of property() in your code then that will also be very helpful. I am not getting the idea why you have used property method.

RE: How to create conditional checkbox ?

prais1852 — Wed, 30 Aug 2017 12:29:18 GMT

Hi on saving values in rule input it is not working compared to the above code written by you. Is there any other way to store the data with item & sizes pair ?

RE: How to create conditional checkbox ?

prais1852 — Wed, 16 Aug 2017 19:38:24 GMT

My problem is same as earlier. Still if i click one of the Nodes Affected ( Product Sizes in earlier examples ) and then select the some other from list of checkboxes, my previous selection gets removed. However it is working fine for the code you mentioned above using local variables but not working with rule inputs.

RE: How to create conditional checkbox ?

Mike Schmitt — Wed, 16 Aug 2017 19:34:55 GMT

I don't really need an XSD, just maybe a description of how some of the CDT properties you're using are configured (such as NodesAffected for instance), or maybe a screenshot. And also you didn't mention what error you're getting.

RE: How to create conditional checkbox ?

prais1852 — Wed, 16 Aug 2017 19:34:37 GMT

Here is the XSD of the CDT -

<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:tns="urn:com:appian:types:CCCD" targetNamespace="urn:com:appian:types:CCCD">
  <xsd:complexType name="CCC_Details">
    <xsd:annotation>
      <xsd:documentation><![CDATA[Information]]></xsd:documentation>
    </xsd:annotation>
    <xsd:sequence>
      <xsd:element name="CCCNumber" nillable="true" type="xsd:int">
        <xsd:annotation>
          <xsd:appinfo source="appian.jpa">@Id @GeneratedValue</xsd:appinfo>
        </xsd:annotation>
      </xsd:element>
      <xsd:element name="Approved" nillable="true" type="xsd:string">
        <xsd:annotation>
          <xsd:appinfo source="appian.jpa">@Column(length=50)</xsd:appinfo>
        </xsd:annotation>
      </xsd:element>
      <xsd:element name="ApprovalDate" nillable="true" type="xsd:date" />
      <xsd:element name="PRNumber" nillable="true" type="xsd:int" />
      <xsd:element name="ProductGroupAffected" nillable="true" type="xsd:string" />
      <xsd:element maxOccurs="unbounded" minOccurs="0" name="ToolsAffected" nillable="true" type="xsd:string" />
      <xsd:element maxOccurs="unbounded" minOccurs="0" name="NodesAffected" nillable="true" type="xsd:string" />
      <xsd:element name="ApprovedBy" nillable="true" type="xsd:string">
      
      <xsd:element name="Bundled" nillable="true" type="xsd:string">
        <xsd:annotation>
          <xsd:appinfo source="appian.jpa">@Column(length=5)</xsd:appinfo>
        </xsd:annotation>
      </xsd:element>
      <xsd:element name="CreatedBy" nillable="true" type="xsd:string">
        <xsd:annotation>
          <xsd:appinfo source="appian.jpa">@Column(length=100)</xsd:appinfo>
        </xsd:annotation>
      </xsd:element>
      <xsd:element name="CreatedOn" nillable="true" type="xsd:dateTime" />
      <xsd:element name="UpdatedBy" nillable="true" type="xsd:string">
        <xsd:annotation>
          <xsd:appinfo source="appian.jpa">@Column(length=100)</xsd:appinfo>
        </xsd:annotation>
      </xsd:element>
      <xsd:element name="UpdatedOn" nillable="true" type="xsd:dateTime" />
    </xsd:sequence>
  </xsd:complexType>
</xsd:schema>

RE: How to create conditional checkbox ?

prais1852 — Wed, 16 Aug 2017 19:31:18 GMT

I am using a CDT for this rule input. Do you need XSD of that CDT ?

RE: How to create conditional checkbox ?

Mike Schmitt — Wed, 16 Aug 2017 19:22:35 GMT

Can you share the configuration of ri!CCC?

RE: How to create conditional checkbox ?

prais1852 — Wed, 16 Aug 2017 18:28:46 GMT

I have problem with rule Inputs when i am translating the code for Rule Inputs. Here is the part of code that i am using for my application and looking for the explanation of this part of answer suggested by you -

a!columnsLayout(
			columns: a!forEach(
				ri!CCC.toolsaffected,
				with(
					local!currentIndex: wherecontains(
					fv!item,
					touniformstring(property(ri!CCC.NodesAffected, "item", {}))
				),
		
        a!columnLayout(
					contents: {
          	a!checkboxField(
              label: "Nodes Affected for : '" & fv!item & "'",
              labelPosition: "ABOVE",
              /*instructions: "current index: " & local!currentIndex,*/
              choiceLabels: {"1262", "1264", "1266","1268","1270","1272","1274","1276"},
              choiceValues: {1262, 1264, 1266, 1268, 1270, 1272, 1274, 1276},
              value: tointeger(
              property(
                  index(
                    ri!CCC.NodesAffected,
                    local!currentIndex,
                    null()
                   ),
                   "nodes",
                   null()
                 )
               ),
               saveInto: {
                 a!save(
                   ri!CCC.NodesAffected,
                     append(
                       if(isnull(local!currentIndex),
                         ri!CCC.NodesAffected,
                         remove(ri!CCC.NodesAffected, local!currentIndex)
                        ),
                        if(
                            rule!APN_isEmpty(save!value),
                            /* indicates all size choices have been de-selected, so we'll save an empty set here to remove this menu choice from the saved data set */
                            {},
                            {
                              item: fv!item,
                              nodes: save!value
                            }
                          )
        							)
      						)
    						}
  						)
    				}
  				)
  			)
  		),
		  showwhen: not(isnull(ri!CCC.ProductGroupAffected))
		),

RE: How to create conditional checkbox ?

Mike Schmitt — Wed, 16 Aug 2017 16:26:26 GMT

Do you mean you're having trouble getting it to work in a task, or just when trying to convert some of the local variables to rule inputs instead? Can you provide a little more detail about the setup you've done and what's going wrong? And which code are you referring to that you need an explanation on?

RE: How to create conditional checkbox ?

prais1852 — Wed, 16 Aug 2017 16:19:53 GMT

Hi Your code worked with local variables but i am getting problem when trying to save value in Rule input (ri!) fields. Could you please explain what your functions are trying to do in 2nd parameter (expression) of a!ForEach() ?

RE: How to create conditional checkbox ?

Mike Schmitt — Tue, 08 Aug 2017 16:04:11 GMT

I was able to get it working - basically it required somewhat different handling of the local variable being used to store sizes, storing it as an array instead of a singular in the local dictionary, and special handling for when the user de-selects back down to the empty set.

load(

  local!restaurantChoices: {
    {id: 1, name: "KFC"}, 
    {id: 2, name: "Pizza Hut"}
  },
  local!selectedRestaurant,
  local!menuSelection: {},
  
  /* set up Menu Selection Sizes to be an array of dictionary -
    the CDT would resemble {item: "item name", size: sizeId} */
  local!menuSelectionSizes: {},
  
  with(
    
    /* dynamically set the menu choices based on which restaurant is picked */
    local!menuChoices: if(
      isnull(local!selectedRestaurant),
      {},
      if(
        tointeger(local!selectedRestaurant) = 1,
        {
          "Fried Chicken", "Mashed Potatoes", "Cole Slaw", "Biscuits", "Gravy"
        },
        if(
          tointeger(local!selectedRestaurant) = 2,
          {
            "Pizza", "Bread Sticks", "Salad Bar", "Soft Drinks"
          },
          {}
        )
      )
    ),
    
    a!formLayout( 
    /* now assuming 17.2 or newer */
      
      contents: {
        a!radioButtonField(
          label: "Chain:",
          labelPosition: "ADJACENT",
          choiceLabels: local!restaurantChoices.name,
          choiceValues: local!restaurantChoices.id,
          value: local!selectedRestaurant,
          saveInto: {
            local!selectedRestaurant,
            
            /* the below will clear the previous menu selection when the restaurant is changed */
            a!save(
              local!menuSelection,
              {}
            )
          }
        ),
        
        if(
          not(isnull(local!selectedRestaurant)),
          a!checkBoxField(
            label: "Make your food choices:",
            labelPosition: "ADJACENT",
            choiceLabels: local!menuChoices,
            choiceValues: local!menuChoices,
            value: local!menuSelection,
            saveInto: {
              a!save(
                local!menuSelection,
                /* this weird saveInto style will attempt to keep the saved value array in the same order as the
                initial checkboxes, since Appian versions 17.1 and later no longer do this automatically */
                index(
                  local!menuChoices,
                  whereContains(
                    save!value,
                    local!menuChoices
                  )
                )
              )
            }
          ),
          {}
        ),
        a!columnsLayout(
          columns: a!forEach(
            local!menuSelection,
            with(
              local!currentIndex: wherecontains(
                fv!item,
                touniformstring(property(local!menuSelectionSizes, "item", {}))
              ),
              a!columnLayout(
                contents: {
                  a!checkboxField(
                    label: "Select Size: '" & fv!item & "'",
                    labelPosition: "ABOVE",
                    choiceLabels: {"Small", "Medium", "Large"},
                    choiceValues: {1, 2, 3},
                    value: tointeger(
                      property(
                        index(
                          local!menuSelectionSizes,
                          local!currentIndex,
                          null()
                        ),
                        "sizes",
                        null()
                      )
                    ),
                    saveInto: {
                      a!save(
                        local!menuSelectionSizes,
                        append(
                          if(
                            isnull(local!currentIndex),
                            local!menuSelectionSizes,
                            remove(local!menuSelectionSizes, local!currentIndex)
                          ),
                          if(
                            apn_isEmpty(save!value),
                            /* indicates all size choices have been de-selected, so we'll save an empty set here to remove this menu choice from the saved data set */
                            {},
                            {
                              item: fv!item,
                              sizes: save!value
                            }
                          )
                        ) 
                      )
                    }
                  )
                }
              )
            )
          )
        ),
        
        /*a!paragraphField(*/
          /*label: "debug",*/
          /*value: local!menuSelectionSizes*/
        /*),*/
        
        {}
      } 
    )
  )
)