Expression for actualize the specific interface

Certified Associate Developer

Hi,

We are planning to develop an interface to actualize the functions in the attached file,

but we are not sure if Appian can actualize those functions.

If it dose , may you tell us the expressions?

Best regards

  Discussion posts and replies are publicly visible

  • 0
    Certified Lead Developer

    Are you asking if it's possible to have a link on a grid row that can add a row, and another that can copy the data?

  • 0
    Certified Associate Developer
    in reply to Joshua F

    Thank you for your replying! 

    In fact we want to actualize those two functions you said with one click.

  • 0
    Certified Lead Developer
    in reply to wangz0002

    a!localVariables(
      local!data: {
        {
          number: 1,
          name: "Aaa",
          value: 123,
          status: "good"
        }
      },
      a!gridLayout(
        headerCells: {
          a!gridLayoutHeaderCell(label: "Number"),
          a!gridLayoutHeaderCell(label: "Name"),
          a!gridLayoutHeaderCell(label: "Value"),
          a!gridLayoutHeaderCell(label: "Status"),
          a!gridLayoutHeaderCell(label: "Operation"),
          
        },
        rows: a!forEach(
          items: local!data,
          expression: a!gridRowLayout(
            id: fv!index,
            contents: {
              a!textField(readOnly: true, value: fv!item.number),
              a!textField(readOnly: true, value: fv!item.name),
              a!textField(readOnly: true, value: fv!item.value),
              a!textField(readOnly: true, value: fv!item.status),
              a!richTextDisplayField(
                value: {
                  a!richTextIcon(
                    icon: "plus",
                    linkStyle: "STANDALONE",
                    link: a!dynamicLink(
                      value: fv!item,
                      saveInto: a!save(
                        local!data,
                        append(local!data, save!value)
                      )
                    )
                  ),
                  a!richTextItem(
                    text: " Add a row",
                    linkStyle: "STANDALONE",
                    link: a!dynamicLink(
                      value: fv!item,
                      saveInto: a!save(
                        local!data,
                        append(local!data, save!value)
                      )
                    )
                  )
                }
              )
            }
          )
        )
      )
    )

    This should get you on the right path. 

    I used an editable grid with the data based on a local dictionary of data. The magic happens in the save into on the rich text objects. I am using a dynamic link to to append the data used to populate the grid. I am sure this is not 100% what you need but it should get you familiar enough with the design concepts to build out according to your own use case. 

  • 0
    Certified Associate Developer
    in reply to Joshua F

    Appreciate for your awesome solution! That we can go to next step with this magic Slight smile.

  • 0
    Certified Lead Developer
    in reply to wangz0002

    Hi you can try this code, it will work for your use case. Replace local!data with your CDT.

    a!localVariables(
      /*Consider this is your CDT*/
      local!data: {
        a!map( id:null, name: null , value: null , status: null , operation: null),
      },
      local!index,
      {
        a!gridLayout(
          totalCount: count(local!data),
          headerCells: {
            a!gridLayoutHeaderCell(label: "No" ),
            a!gridLayoutHeaderCell(label: "Name" ),
            a!gridLayoutHeaderCell(label: "Value" ),
            a!gridLayoutHeaderCell(label: "Status" ),
            a!gridLayoutHeaderCell(label: "Operation", align: "RIGHT" ),
            a!gridLayoutHeaderCell(label: "" )
          },
          columnConfigs: {
            a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:1 ),
            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: "ICON")
          },
          rows: a!forEach(
            items: local!data,
            expression: a!gridRowLayout(
              contents: {
                a!textField(
                  label: "no " & fv!index,
                  value: fv!item.id,
                  saveInto: fv!item.id,
                  required: true
                ),
                a!textField(
                  label: "name " & fv!index,
                  value: fv!item.name,
                  saveInto: fv!item.name,
                  required:true
                ),
                a!integerField(
                  label: "value " & fv!index,
                  value: fv!item.value,
                  saveInto: fv!item.value,
                  required:true
                ),
                a!textField(
                  label: "status " & fv!index,
                  value: fv!item.status,
                  saveInto: fv!item.status
                ),
                a!dateField(
                  label: "start date " & fv!index,
                  value: fv!item.operation,
                  saveInto: fv!item.operation,
                  required:true,
                  align: "RIGHT"
                ),
                /* For the Removal Column*/
                a!richTextDisplayField(
                  value: a!richTextIcon(
                    icon: "close",
                    altText: "delete " & fv!index,
                    caption: "Remove " & fv!item.name,
                    link: a!dynamicLink(
                      value: fv!index,
                      saveInto: {
                        a!save(local!data, remove(local!data, save!value))
                      }
                    ),
                    linkStyle: "STANDALONE",
                    color: "NEGATIVE"
                  )
                )
              },
              id: fv!index
            )
          ),
          addRowlink: a!dynamicLink(
            label: "Add New Row",
            value: {
              /*You need to call your CDT here*/
              operation: if(
                a!isNullOrEmpty(local!data),
                null,
                if(
                  length(local!data) > 2,
                  index(local!data[length(local!data)], "operation", null),
                  index(local!data[1], "operation", null)
                )
              )
            },
            saveInto: {
              a!save(local!data, append(local!data, save!value))
            }
          ),
          rowHeader: 1
        )
      }
    )

  • 0
    Certified Associate Developer
    in reply to Naresh

    Thank you for your solution!:)

  • 0
    Certified Lead Developer

    Hi, Did slight modifications to above answers, hope this code exactly suits for your requirement.

    a!localVariables(
      local!data: {
        {
          number: 1,
          name: "Aaa",
          value: 123,
          status: "good"
        }
      },
      a!gridLayout(
        headerCells: {
          a!gridLayoutHeaderCell(label: "Number"),
          a!gridLayoutHeaderCell(label: "Name"),
          a!gridLayoutHeaderCell(label: "Value"),
          a!gridLayoutHeaderCell(label: "Status"),
          a!gridLayoutHeaderCell(label: "Operation"),
          
        },
        rows: a!forEach(
          items: local!data,
          expression: a!gridRowLayout(
            id: fv!index,
            contents: {
              a!textField(readOnly: false, value: fv!item.number),
              a!textField(readOnly: false, value: fv!item.name),
              a!textField(readOnly: false, value: fv!item.value),
              a!textField(readOnly: false, value: fv!item.status),
              a!buttonArrayLayout(
                buttons: {
                  a!buttonWidget(
                    label: "Add a blank row upon",
                    size: "SMALL",
                    saveInto: {
                      a!save(local!data, append(local!data, null))
                    }
                  ),
                  a!buttonWidget(
                    label: "Copy the data to next row",
                    size: "SMALL",
                    saveInto: {
                      a!save(
                        local!data,
                        insert(local!data, fv!item, fv!index + 1)
                      )
                    }
                  )
                }
              )
            }
          )
        )
      )
    )

  • 0
    Certified Associate Developer
    in reply to venkyuppala09

    Thank you for your sharing ;)

  • 0
    Certified Lead Developer

    I would consider putting Icons side by side, with captions that can tell the users which does which.  I find that to be a lot more effective, because once the users learn what the symbols mean (1 minute, perhaps) it becomes super fast to scan with the eye.

    Heavy plus sign Is the standard for add a row, a stack of 2 sheets of paper (can't find icon) is classic symbol for copy, and red X is go to for delete this row.

  • 0
    Certified Associate Developer
    in reply to Dave Lewis

    Thank you for your advice!