Interface, grid validations

Question

Hi, 
 I have an interface with editable grid (a!gridLayout) where I am trying to add a new row with required elements when user clicks on "Add Dcoument". 
 I have to achieve the below requirements. Not 100% sure whether it can be done or not. 
 1. If any one of the field / element filled with data, other fields/elements should be filled with. 
 2. Also, there should not be any row with empty empty fields/elements.

When I try to write a validation in the Document Title field, then it is applying to all the rows of that field when I click on the "Add Document". Not sure how to handle for row by row. 
 required: if(a!isNotNullOrEmpty(ri!Documents.documenttype),true(),false())

Mike Schmitt · Accepted Answer

I made you a fixed example (with stuff slightly reworked to not require the rules / constant on your environment) which handles the saving of the local array into the rule input in the appropriate place (in the submit button) and properly handles intialization of the local array / etc. 
 (note I turned of the requiredness of the file upload field temporarily just to allow easier testing of the saveinto on the submit button click, which for now saves into a fake local variable called "exampleOutput", but in your real interface you'll change to save back into your Rule Input array). 
 a!localVariables(
 local!documentTypes: {
 {
 description: "doc 1",
 documenttypekey: 1
 },
 {
 description: "doc 2",
 documenttypekey: 2
 }
 },
 /*rule!LCM_getDocumentTypes(documentTypeKey: null()),*/
 local!intakedocuments: {},
 local!itemscount: count(local!intakedocuments),

 local!blankRow: 
 /*'type!{urn:com:appian:types:LCM}LCM_IntakeDocuments'(),*/
 a!map(
 DocKey: null(),
 IntakeHeaderKey: null(),
 documentid: null(),
 documenttitle: "",
 documenttypekey: null(),
 uploadedby: loggedInUser(),
 dateuploaded: now()
 ),
 
 local!exampleOutput: {},

 a!formLayout(
 label: "Document Details",
 contents: {
 a!gridLayout(
 totalCount: count(local!intakedocuments),
 headerCells: {
 a!gridLayoutHeaderCell(label: "Document Type"),
 a!gridLayoutHeaderCell(label: "Document Title"),
 a!gridLayoutHeaderCell(label: "Document"),
 /* For the "Remove" column */
 a!gridLayoutHeaderCell(label: "")
 },
 columnConfigs: {
 a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 1),
 a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 1),
 a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 1),
 a!gridLayoutColumnConfig(width: "ICON")
 },
 rows: a!forEach(
 items: local!intakedocuments,
 expression: a!gridRowLayout(
 id: fv!index,
 contents: {
 a!dropdownField(
 label: "DocumentType " & fv!index,
 placeholder: "-- Select -- ",
 choiceLabels: index(local!documentTypes, "description", ""),
 choiceValues: index(
 local!documentTypes,
 "documenttypekey",
 ""
 ),
 value: fv!item.documenttypekey,
 saveInto: {
 fv!item.documenttypekey,
 /*a!save(*/
 /*ri!lcmIntakeDocuments,*/
 /*a!forEach(*/
 /*items: local!intakedocuments,*/
 /*expression: {*/
 /*documentid: fv!item.documentid,*/
 /*documenttitle: fv!item.documenttitle,*/
 /*documenttypekey: fv!item.documenttypekey,*/
 /*uploadedby: loggedInUser(),*/
 /*dateuploaded: now()*/
 /*}*/
 /*)*/
 /*)*/
 },
 required: if(
 or(
 a!isNotNullOrEmpty(fv!item.documenttitle),
 a!isNotNullOrEmpty(fv!item.documentid)
 ),
 true(),
 false()
 )
 ),
 a!textField(
 label: "DocumentTitle" & fv!index,
 value: fv!item.documenttitle,
 saveInto: {
 fv!item.documenttitle,
 /*a!save(*/
 /*ri!lcmIntakeDocuments,*/
 /*a!forEach(*/
 /*items: local!intakedocuments,*/
 /*expression: {*/
 /*documentid: fv!item.documentid,*/
 /*documenttitle: fv!item.documenttitle,*/
 /*documenttypekey: fv!item.documenttypekey,*/
 /*uploadedby: loggedInUser(),*/
 /*dateuploaded: now()*/
 /*}*/
 /*)*/
 /*)*/
 },
 required: if(
 or(
 a!isNotNullOrEmpty(fv!item.documenttypekey),
 a!isNotNullOrEmpty(fv!item.documentid)
 ),
 true(),
 false()
 )
 ),
 a!fileUploadField(
 label: "Attach LCM Document(s)" & fv!index,
 /*target: cons!LCMDOCUMENTS,*/
 maxSelections: 1,
 value: fv!item.documentid,
 saveInto: {
 fv!item.DocumentID,
 /*a!save(*/
 /*ri!lcmIntakeDocuments,*/
 /*a!forEach(*/
 /*items: local!intakedocuments,*/
 /*expression: {*/
 /*documentid: fv!item.documentid,*/
 /*documenttitle: fv!item.documenttitle,*/
 /*documenttypekey: fv!item.documenttypekey,*/
 /*uploadedby: loggedInUser(),*/
 /*dateuploaded: now()*/
 /*}*/
 /*)*/
 /*)*/
 },
 buttonStyle: "STANDARD",
 required: if(
 or(
 a!isNotNullOrEmpty(fv!item.documenttypekey),
 a!isNotNullOrEmpty(fv!item.documenttitle)
 ),
 /*true(),*/ false(),
 false()
 )
 ),
 /* For the Removal Column*/
 a!richTextDisplayField(
 value: a!richTextIcon(
 icon: "close",
 altText: "Delete ",
 caption: "Delete ",
 link: a!dynamicLink(
 value: fv!index,
 saveInto: {
 a!save(
 local!intakedocuments,
 remove(local!intakedocuments, save!value)
 ),
 /*a!save(*/
 /*ri!lcmIntakeDocuments,*/
 /*remove(ri!lcmIntakeDocuments, save!value)*/
 /*)*/
 },

 ),
 linkStyle: "STANDALONE",
 color: "NEGATIVE"
 )
 )
 }
 )
 ),
 addRowlink: a!dynamicLink(
 label: "Add Document",
 saveInto: {
 a!save(
 local!intakedocuments,
 append(local!intakedocuments, local!blankRow),

 ),
 /*a!save(*/
 /*local!itemscount,*/
 /*count(ri!lcmIntakeDocuments)*/
 /*)*/
 }
 ),
 spacing: "DENSE",
 rowHeader: 1
 )
 },
 buttons: a!buttonLayout(
 primaryButtons: {
 a!buttonWidget(
 label: "Submit" & local!itemscount,
 submit: true,
 style: "PRIMARY",
 saveInto: {
 a!save(
 /*ri!lcmIntakeDocuments,*/ local!exampleOutput,
 a!forEach(
 items: local!intakedocuments,
 expression: {
 documentid: fv!item.documentid,
 documenttitle: fv!item.documenttitle,
 documenttypekey: fv!item.documenttypekey,
 uploadedby: loggedInUser(),
 dateuploaded: now()
 }
 )
 )
 }
 )
 },
 secondaryButtons: {
 a!buttonWidget(
 label: "Cancel",
 value: true,
 /*saveInto: ri!cancel,*/
 submit: true(),
 style: "NORMAL",
 validate: false
 )
 }
 )
 )
) 
 
 Let me know if any questions.

Mike Schmitt · Answer

The "required" setting for the Title text entry would need to be based on that row's document Type selection - at the moment you're basing it on the value of the entire array, which won't really work well. It should be something along the lines of " fv!item.documentType " in your example. Basically the same thing that you're (hopefully) saving the row-specific document type value into.

Mike Schmitt · Answer

Can you specify what you mean exaclty by "entire row is empty"? What would the validation condition be exactly / what would you want to show the user / what would you hope the user does differently? Generally, when a row is added and you make all 3 of the column-fields required, when they attempt to "submit", the item-by-item 'required' messages will show.

Mike Schmitt · Answer

swapnar6405 said: if any of the row (All elements) left empty and try to submit the form, then I would like to provide validation. 
 Setting the "required" parameter on any / all of the fields should accomplish this. Generally I recommend you stick to this approach unless you have strong reasoning to do otherwise. 
 swapnar6405 said: Is it mandatory to show at least one row in the editable grid? 
 No. If you want to start out with an empty grid (until the user clicks "add"), you should make sure to pass in an empty set as your initial CDT value.

Mike Schmitt · Answer

Please share a code snippet - there's something you're not initializing correctly, but it's hard to tell based only on front-end screenshots

Mike Schmitt · Answer

You need to initialize local!intakedocuments as an empty set ({}), not null. The a!forEach() function properly handles an empty set, but if you pass a value of null(), it'll assume that's an actual (empty) row with invalid properties, producing the error you're seeing.

Mike Schmitt · Answer

You'll also want to replace this "save!value" (which is empty) with your CDT type declaration. This will mean you're appending one row containing that empty CDT (instead of null) to the end of the array (which, when the array is starting blank, will mean it's just an array of a single empty copy of htat CDT, which is what you'llw ant).

Mike Schmitt · Answer

Also, sorry i didn't notice this before - you'll have to rework your saveIntos to remove this. This won't work the way you think it will. You should be relying on the individual fields to save their own properties into the CDT.

Mike Schmitt · Answer

Hi, 
 I included that in the example code I posted above, and mentioned it in my comment. 
 In other words, you'll un-comment the rule input there, and get rid of local!exampleOutput completely.

Mike Schmitt · Answer

You can have that saveInto anywhere you need it to be, including in the navigation controls when the user is going to the next tab. It's hard for me to guess what your navigation pattern and advanced requirements are since these weren't mentioned earlier or included in the sample code. But in general it's very doable.

Interface, grid validations

Top Replies