SAIL to mimic grid column definition in interface designer

My use case is to have the ability to add, remove and reorder items in a list similar to what we see for defining the columns in a grid in interface designer.

Is something like this possible using SAIL? I would think so, but having a hard time envisioning this. Is it a series of cards with rich text-based links to manipulate the positioning? Thanks in advance.

  Discussion posts and replies are publicly visible

  • +1
    Certified Senior Developer

    Hello  
    I guess, It can be done. You will have to play around with icons and dynamic links.

    Below is a code that I have tried and is working fine. You can try updating id according to your requirement and check if it helps. Also ensure you follow best practices. I have missed few as I wrote the below as an example to show that it is doable in Appian.

    But what is the requirement? Displaying data will be a little complicated and you will have to figure out. I cannot do the part for data as I am using map. Are you planning to use this for an editable grid?

    a!localVariables(
      local!columns: {
        a!map(name: "ID", index: 1),
        a!map(name: "Name", index: 2),
        a!map(name: "Age", index: 3),
        a!map(name: "Gender", index: 4),
    
      },
      local!updatedorder: a!refreshVariable(
        value: todatasubset(
          local!columns,
          a!pagingInfo(
            startIndex: 1,
            batchSize: - 1,
            sort: a!sortInfo(field: "index", ascending: true)
          )
        ).data,
        refreshOnReferencedVarChange: true
      ),
      a!columnsLayout(
        columns: {
          a!columnLayout(
            width: "WIDE_PLUS",
            contents: {
              a!gridField(
                label: "Read-only Grid",
                labelPosition: "ABOVE",
                data: local!updatedorder,
                columns: {
                  a!forEach(
                    items: local!updatedorder,
                    expression: a!gridColumn(label: fv!item.name, value: {})
                  )
                },
                validations: {}
              )
            }
          ),
          a!columnLayout(
    
            contents: {
              a!cardLayout(
                contents: {
                  a!forEach(
                    items: local!updatedorder,
                    expression: a!localVariables(
                      local!isEditable: false,
                      a!cardLayout(
                        shape: "ROUNDED",
                        showShadow: true(),
                        contents: a!columnsLayout(
                          showDividers: true,
                          columns: {
                            a!columnLayout(
                              contents: if(
                                local!isEditable,
                                a!textField(
                                  label: "Column Name "&fv!index,
                                  value: fv!item.name,
                                  saveInto: {
                                    {
                                      local!columns[fv!index].name,
                                    }
                                  }
                                ),
                                a!richTextDisplayField(
                                  label: "Column Name"&fv!index,
                                  value: a!richTextItem(
                                    text: fv!item.name,
                                  )
                                )
                              )
                            ),
                            a!columnLayout(
                              contents: a!richTextDisplayField(
                                value: {
                                  a!richTextIcon(
                                    icon: "arrow-circle-up",
                                    link: if(
                                      fv!isFirst,
                                      {},
                                      a!dynamicLink(
                                        value: fv!item.index - 1,
                                        saveInto: {
                                          local!columns[fv!index].index,
                                          a!save(
                                            local!columns[fv!index - 1],
                                            a!update(
                                              local!columns[fv!index - 1],
                                              "index",
                                              tointeger(
                                                index(local!columns.index, fv!index - 1, null)
                                              ) + 1
                                            )
                                          )
                                        }
                                      )
                                    )
                                  ),
                                  char(09),
                                  a!richTextIcon(
                                    icon: "arrow-circle-down",
                                    link: if(
                                      fv!isLast,
                                      {},
                                      a!dynamicLink(
                                        value: fv!item.index + 1,
                                        saveInto: {
                                          local!columns[fv!index].index,
                                          a!save(
                                            local!columns[fv!index + 1].index,
                                            tointeger(
                                              index(local!columns.index, fv!index + 1, null)
                                            ) - 1
                                          )
                                        }
                                      )
                                    )
                                  ),
                                  char(09),
                                  a!richTextIcon(
                                    icon: if(local!isEditable, "check-circle", "pen"),
                                    link: a!dynamicLink(value: if(local!isEditable, false, true),saveInto: local!isEditable)
                                  ),
                                  char(09),
                                  a!richTextIcon(
                                    icon: "times-circle",
                                    color: "NEGATIVE",
                                    link: a!dynamicLink(
                                      saveInto: a!save(
                                        local!columns,
                                        remove(
                                          local!columns,
                                          fv!index
                                        )
                                      )
                                    )
                                  )
                                }
                              ),
                            )
                          }
                        )
                      )
                    )
                  ),
                  a!buttonArrayLayout(
                    align: "CENTER",
                    buttons: a!buttonWidget(
                      width: "FILL",
                      label: "Add Column",
                      icon: "plus-circle",
                      saveInto: a!save(
                        local!columns,
                        append(
                          local!columns,
                          a!map(
                            name:"Column "&length(local!columns)+1,
                            index:length(local!columns)+1
                          ),
                        )
                      )
                    )
                  )
                }
              )
            }
          )
        }
      )
    )




  • 0
    Certified Lead Developer

    Find examples in the documentation.

    https://docs.appian.com/suite/help/23.4/recipe-add-edit-and-remove-data-in-an-inline-editable-grid.html

    The only thing is, that Appian does not support this popup-style.

  • 0
    Certified Lead Developer
    in reply to Stefan Helzle

    Any idea when Appian will start supporting pop-ups and drag and drop ability.

  • 0
    Certified Senior Developer
    in reply to Konduru Chaitanya

      If the answer has helped you please verify the answers that were helpful and mark the thread as closed.

  • 0
    Certified Lead Developer
    in reply to Abhay Dalsaniya

    Is that something we really need?

  • 0
    Certified Lead Developer
    in reply to Stefan Helzle

    If it is available, will help building the competitive UIs.