Enabled and disabled in editable grid

Certified Associate Developer

Hi All, 

Below is the screenshot of requirement

You can see the item status is disabled against + icon and Enabled against cross icon
If we  click on + icon, status will be changed to enabled and icon will be changed to - automatically.

a!localVariables(
  local!Employeefilterdata:"Employee_Id",
  
  /*local!Employeefilterdata: rule!ETA_filterEmployeesData(),*/
  local!Employeedata: rule!ETA_employeeData(local!Employeefilterdata),
  local!deletedEmployeeIds,
  
  
  /* Create Pagination */
  local!startIndex: 1,
  local!batchSize: 5,
  local!pagingInfo: a!pagingInfo(
    
    startIndex: local!startIndex,
    batchSize: local!batchSize
  ),
  local!datasubset: todatasubset(
    arrayToPage: local!Employeedata,
    pagingConfiguration: local!pagingInfo
  ),
  
  
 
  
a!formLayout(
  label: " Employee Data",
  instructions: "Add, Update and Remove Employee Data",
  contents: {
    a!imageField(
      label: "",
      labelPosition: "ABOVE",
      images: {a!documentImage(cons!ETA_HRA)},
      size: "FIT",
      isThumbnail: false,
      style: "STANDARD",
     
      marginAbove: "EVEN_LESS"
    ),
    a!dropdownField(
      label: "Selection",
      labelPosition: "ABOVE",
      placeholder: "--- Select a Value ---",
      choiceLabels: {cons!ETA_EMPLOYEE_CDT_DSE_POINTER},
      choiceValues: {cons!ETA_EMPLOYEE_CDT_DSE_POINTER},
      value: local!Employeefilterdata,
      saveInto: {local!Employeefilterdata},
      searchDisplay: "AUTO",
      validations: {}
    ),
      a!gridLayout(
        totalCount: local!datasubset.totalCount,
        headerCells: {
          /*a!gridLayoutHeaderCell(label: "Employee Id" ),*/
          
          a!gridLayoutHeaderCell(label: "Employee Name" ),
           
          a!gridLayoutHeaderCell(label: "DOB" ),
          a!gridLayoutHeaderCell(label: "Department" ),
          a!gridLayoutHeaderCell(label: "Designation" ),
          /*a!gridLayoutHeaderCell(label: "Phone Number" ),*/
          a!gridLayoutHeaderCell(label: "Date Of Joining" ),
          a!gridLayoutHeaderCell(label: "Gender" ),
          a!gridLayoutHeaderCell(label: "Email Address" ),
          a!gridLayoutHeaderCell(label: "Status"),
          /*a!gridLayoutHeaderCell(label: "Start Date", align: "RIGHT" ),*/
          /* For the "Remove" column */
          a!gridLayoutHeaderCell(label: " " )
        },
        /* Only needed when some columns need to be narrow */
        columnConfigs: {
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 4),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3)
        },
        /*
        * a!forEach() will take local!employee data and used that data to loop through an
        * expression that creates each row.
        *
        * When modifying the recipe to work with your data, you only need to change:
        * 1.) the number of fields in each row
        * 2.) the types of fields for each column (i.e. a!textField() for text data elements)
        * 3.) the fv!item elements. For example fv!item.firstName would change to fv!item.yourdata
        */
        rows: a!forEach(
          items: local!datasubset,
          expression: a!gridRowLayout(
            id: fv!index,
            contents: {
              
              /*a!textField(*/
                /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
                /*label: "Employee Id " & fv!index,*/
                /*value: fv!item.Employee_Id,*/
                /*saveInto: fv!item.Employee_Id,*/
                /*required: true*/
              /*),*/
              
              
              /* For the Employee Name Column*/
              a!textField(
                /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
                label: "Employee Name " & fv!index,
                value: fv!item.Employee_Name,
                saveInto: {fv!item.Employee_Name,
                a!save(local!Employeedata[fv!identifier],
                updatedictionary(local!Employeedata[fv!identifier],
                {Employee_Name: save!value}
                ))
                },
                required: true
                ),
                
               
              /* For the DOB Column*/
              a!dateField(
                label: "DOB " & fv!index,
                value: fv!item.DOB,
                saveInto: {fv!item.DOB,
                a!save(local!Employeedata[fv!identifier],
                updatedictionary(local!Employeedata[fv!identifier],
                {DOB: save!value}
                ))
                },
                required:true
              ),
            
              /* For the Department Column*/
              a!dropdownField(
                label: "Department " & fv!index,
                placeholder: "-- Select -- ",
                choiceLabels: {"Desktop Support", "Helpdesk","Systems Engineering","Network Engineering","Application Management"},
                choiceValues: {"Desktop Support", "Helpdesk","Systems Engineering","Network Engineering","Application Management"},
                
                value: fv!item.Department,
                saveInto: {fv!item.Department,
                a!save(local!Employeedata[fv!identifier],
                updatedictionary(local!Employeedata[fv!identifier],
                {Department: save!value}
                ))
                },
                required:true
              ),
              /* For the Designation Column*/
              a!dropdownField(
                label: "Designation " & fv!index,
                placeholder: "-- Select -- ",
                ChoiceLabels: {"Cloud Computing Engineer", "Network Specialist", "Support Specialist", "Database Administrator",
                "Information Technology Analyst", "Technology Leadership", "Security Specialist", "Software/Application Developer"},

                choiceValues: {"Cloud Computing Engineer", "Network Specialist", "Support Specialist", "Database Administrator",
                "Information Technology Analyst", "Technology Leadership", "Security Specialist", "Software/Application Developer"},

                value: fv!item.Designation,
                saveInto: {fv!item.Designation,
                a!save(local!Employeedata[fv!identifier],
                updatedictionary(local!Employeedata[fv!identifier],
                {Designation: save!value}
                ))
                },
                required:true
              ),
             
              /* For the Phone Number Column*/
              /*a!textField(*/
                /*label: "Phone Number " & fv!index,*/
                /*placeholder:"555-456-7890",*/
                /*value: fv!item.Phone_Number,*/
                /*saveInto: fv!item.Phone_Number*/
              /*),*/
               
              
              a!dateField(
                label: "Date Of Joining " & fv!index,
                value: fv!item.Date_Of_Joining,
                saveInto: {fv!item.Date_Of_Joining,
                a!save(local!Employeedata[fv!identifier],
                updatedictionary(local!Employeedata[fv!identifier],
                {Date_Of_Joining: save!value}
                ))
                },
                required:true,
                align: "RIGHT"
              ),
              /* For the Gender Column*/
              a!dropdownField(
                label: "Gender " & fv!index,
                placeholder: "-- Select -- ",
                choiceLabels: {"Male","Female"},
                choiceValues: {"Male","Female"},

                value: fv!item.Gender,
                saveInto: {fv!item.Gender,
                a!save(local!Employeedata[fv!identifier],
                updatedictionary(local!Employeedata[fv!identifier],
                {Gender: save!value}
                ))
                },
                required:true
              ),
              /* For the Email Address Column*/
               
              a!textField(
                label: "Email Address" & fv!index,
                value: fv!item.Email_Address,
                saveInto: {fv!item.Email_Address,
                a!save(local!Employeedata[fv!identifier],
                updatedictionary(local!Employeedata[fv!identifier],
                {Email_Address: save!value}
                ))
                },
                required:true
              ),
              a!textField(
                label: "Status" &fv!index,
                value: cons!ETA_Status,
                saveInto:{cons!ETA_Status,
                a!save(local!Employeedata[fv!identifier],
                updatedictionary(local!Employeedata[fv!identifier],
                {Email_Address: save!value}
                ))
                },
                required:true
              ),
              
              /* For the Removal Column*/
              a!richTextDisplayField(
                label: "Action",
                value: a!richTextIcon(
                  icon: "close",
                  /*color: "STANDARD",*/
                  
                  altText: "delete " & fv!index,
                  caption: "Remove" & fv!item.Employee_Name, 
                  link: a!dynamicLink(
                    value: fv!identifier,
                    saveInto: { if( 
                      isnull( fv!identifier),
                      {},
                      a!save( local!deletedEmployeeIds, append(local!deletedEmployeeIds, fv!item.Employee_Id))
                    ),
                    a!save(ri!Value2, true),
                    a!save(ri!EmployeeId, local!deletedEmployeeIds),
                      a!save(local!Employeedata, remove(local!Employeedata, save!value)),
                      
                        disabled: contains(local!Employeedata, fv!index)
                       
                      
                      
                      
                    }
                    
                    
                  ),
                  linkStyle: "STANDALONE",
                  color: "NEGATIVE"
                )
              )
            }
          )
        ),
        addRowlink: a!dynamicLink(
          label: "Add Employee",
           
          value: 'type!{urn:com:appian:types:ETA}ETA_EmployeeDt'(),
          saveInto: {
            a!save(local!Employeedata, append(local!Employeedata, save!value))
          }
        ),
        shadeAlternateRows: true,
        rowHeader: 1
      
      ),
      /* Pagination Functionality */
      rule!ETA_customPagingForGrid(
        startIndex: local!startIndex,
        batchSize: local!batchSize,
        totalCount: local!datasubset.totalCount
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: a!buttonWidget(
        label: "Submit",
        saveInto: a!save(ri!Item,local!Employeedata),
        submit: true,
        style: "PRIMARY"
      ),
      
      secondaryButtons: {
        a!buttonWidget(
          label: "Cancel",
          value: true,
          saveInto: {ri!Cancel},
          submit: true,
          style: "NORMAL",
          validate: false
        )
      }
    )
  )
  )

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    a!richTextDisplayField(
          label: "Action",
          value: a!richTextIcon(
            icon: if(
              fv!item.status = "Enabled",
              "close",
              "plus"
            ),
            altText: if(
              fv!item.status = "Enabled",
              "Delete ",
              "Add"
            ) & fv!index,
            caption: if(
              fv!item.status = "Enabled",
              "Remove ",
              "Add"
            ) & fv!item.Employee_Name,
            link: a!dynamicLink(
              value: fv!identifier,
              saveInto: {
                if(
                  fv!item.status = "Enabled",
                  a!save(fv!item.status, "Disabled"),
                  a!save(fv!item.status, "Enabled")
                )
              }
            ),
            linkStyle: "STANDALONE",
            color: if(
              fv!item.status = "Enabled",
              "NEGATIVE",
              "POSITIVE"
            )
          )
        )

    Try this component for last column of your grid. I've just saving the status here add other saves as per your requirement.

  • 0
    Certified Lead Developer
    in reply to venkyuppala09

    This should work though personally I've grown to prefer using multiple separate a!richTextIcon() and/or a!richTextItem() fields, each with their own specific conditional showWhen parameter values, instead of trying to use one all-encompassing field with a dozen if() statements sprinkled about (especially when the if() conditions are all essentially the same).

    a!richTextDisplayField(
      label: "Action",
      value: {
        a!richTextIcon(
          showWhen: fv!item.status = "Enabled",
          icon: "close",
          caption: "Remove " & fv!item.employee_name,
          link: a!dynamicLink(...),
          color: "NEGATIVE"
        ),
        a!richTextIcon(
          showWhen: fv!item.status <> "Enabled",
          icon: "plus",
          caption: "Add " & fv!item.employee_name,
          link: a!dynamicLink(...),
          color: "POSITIVE"
        )
      }
    )

Reply
  • 0
    Certified Lead Developer
    in reply to venkyuppala09

    This should work though personally I've grown to prefer using multiple separate a!richTextIcon() and/or a!richTextItem() fields, each with their own specific conditional showWhen parameter values, instead of trying to use one all-encompassing field with a dozen if() statements sprinkled about (especially when the if() conditions are all essentially the same).

    a!richTextDisplayField(
      label: "Action",
      value: {
        a!richTextIcon(
          showWhen: fv!item.status = "Enabled",
          icon: "close",
          caption: "Remove " & fv!item.employee_name,
          link: a!dynamicLink(...),
          color: "NEGATIVE"
        ),
        a!richTextIcon(
          showWhen: fv!item.status <> "Enabled",
          icon: "plus",
          caption: "Add " & fv!item.employee_name,
          link: a!dynamicLink(...),
          color: "POSITIVE"
        )
      }
    )

Children
No Data