RE: SAIL to mimic grid column definition in interface designer

Abhay Dalsaniya — Wed, 07 Feb 2024 16:51:03 GMT

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

RE: SAIL to mimic grid column definition in interface designer

Stefan Helzle — Wed, 07 Feb 2024 07:15:20 GMT

Is that something we really need?

RE: SAIL to mimic grid column definition in interface designer

Konduru Chaitanya — Wed, 07 Feb 2024 06:16:07 GMT

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

RE: SAIL to mimic grid column definition in interface designer

Abhay Dalsaniya — Tue, 06 Feb 2024 19:25:32 GMT

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

RE: SAIL to mimic grid column definition in interface designer

Stefan Helzle — Tue, 06 Feb 2024 07:22:35 GMT

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.

RE: SAIL to mimic grid column definition in interface designer

Konduru Chaitanya — Tue, 06 Feb 2024 06:11:28 GMT

Hello dylanfulmer
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
                      ),
                    )
                  )
                )
              )
            }
          )
        }
      )
    }
  )
)