Dynamic Movements of Rows in Appian

In the world of low-code development platforms, Appian distinguishes itself by swiftly creating powerful applications with minimal coding. A standout feature of Appian is its capability for dynamically moving rows within a dataset, which enhances user experience and streamlines data management. Let’s delve into this functionality and explore its significance in application development.

What are the Dynamic Movements of Rows?

The dynamic movement of rows in Appian applications empowers users to seamlessly manipulate the order of rows within a dataset. This functionality proves to be invaluable in situations where users require the ability to sort, reorder, or prioritize items presented in a table or list.

How Does It Work?

Appian provides developers with intuitive components and functions to implement dynamic movements of rows effortlessly. Developers can utilize drag-and-drop functionality or provide buttons or controls for users to rearrange rows based on their preferences. Behind the scenes, Appian manages the reordering process efficiently, ensuring data integrity and consistency.

Significance in Appian Development:

1. Enhanced User Experience: By enabling users to rearrange rows dynamically, Appian applications become more user-friendly and intuitive. Users can prioritize tasks, organize data, or customize views according to their workflow, leading to improved productivity and satisfaction.
2. Flexible Data Management: Dynamic movements of rows empower users to adapt the presentation of data to suit their needs. Whether it’s reordering tasks in a to-do list or sorting items in a catalog, users gain flexibility in managing data efficiently.
3. Real-time Updates: Changes made to the order of rows are reflected instantaneously, providing users with real-time feedback. This ensures that users always have access to the most up-to-date information and can react promptly to changes in data.
4. Customizable Controls: Appian allows developers to customize the behavior and appearance of row movement controls to align with the application’s design and functionality requirements. Whether it’s a simple drag-and-drop interaction or custom buttons for reordering, developers have the flexibility to tailor the user experience accordingly.

Use Cases:

• Task Management: In task management applications, users can prioritize tasks by rearranging them in order of importance or urgency.
• Workflow Optimization: In workflow applications, users can reorder stages or steps to streamline processes and improve efficiency.
• Catalog Management: In e-commerce applications, users can sort products by various criteria such as price, popularity, or category, enhancing the shopping experience.
• Project Planning: In project management applications, users can organize project milestones, tasks, or resources by dragging and dropping them into the desired sequence.

Conclusion:

Dynamic movements of rows in Appian empower users with the flexibility to customize and organize data dynamically, resulting in a more intuitive and efficient user experience. By leveraging this functionality, developers can create applications that adapt to the evolving needs of users and facilitate seamless data management. Whether it’s task prioritization, workflow optimization, or catalog management, dynamic row movements play a crucial role in enhancing the functionality and usability of Appian applications.

Let’s have a look at what the screen Can look Like.

a!localVariables(
  local!employees: {
    {
      id: 1,
      today: today(),
      todayMinusOne: today() - 1,

    },
    {
      id: 2,
      today: today() - 2,
      todayMinusOne: today() - 3,

    },
    {
      id: 3,
      today: today() - 4,
      todayMinusOne: today() - 5
    },

  },
  {
    a!gridLayout(
      totalCount: count(local!employees),
      headerCells: {
        a!gridLayoutHeaderCell(label: ""),
        a!gridLayoutHeaderCell(label: ""),
        a!gridLayoutHeaderCell(label: ""),
        a!gridLayoutHeaderCell(label: ""),
        a!gridLayoutHeaderCell(label: ""),
        a!gridLayoutHeaderCell(label: ""),
        a!gridLayoutHeaderCell(label: "")
      },
      columnConfigs: {
        a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
        a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
        a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
        a!gridLayoutColumnConfig(width: "ICON"),
        a!gridLayoutColumnConfig(width: "ICON"),
        a!gridLayoutColumnConfig(width: "ICON"),
        a!gridLayoutColumnConfig(width: "ICON")
      },
      rows: a!forEach(
        items: local!employees,
        expression: a!gridRowLayout(
          contents: {
            a!textField(
              value: fv!item.id,
              required: true,
              readOnly: true()
            ),
            a!textField(
              value: fv!item.today,
              required: true,
              readOnly: true()
            ),
            a!textField(
              value: fv!item.todayMinusOne,
              required: true,
              readOnly: true()
            ),
            a!imageField(
              label: "delete " & fv!index,
              images: a!documentImage(
                document: a!iconIndicator("MOVE_UP"),
                altText: "Up",
                caption: "Move Up " & fv!item.firstName,
                link: a!dynamicLink(
                  value: fv!index,
                  saveInto: {
                    if(
                      fv!index = 1,
                      {},
                      {
                        a!save(
                          local!employees,
                          insert(local!employees, fv!item, fv!index - 1)
                        ),
                        a!save(
                          local!employees,
                          remove(local!employees, fv!index + 1)
                        )
                      }
                    )
                  }
                )
              ),
              size: "ICON"
            ),
            a!imageField(
              label: "delete " & fv!index,
              images: a!documentImage(
                document: a!iconIndicator("MOVE_DOWN"),
                altText: "Down",
                caption: "Move Down " & fv!item.firstName,
                link: a!dynamicLink(
                  value: fv!index,
                  saveInto: {
                    if(
                      fv!index = count(local!employees),
                      {},
                      {
                        a!save(
                          local!employees,
                          insert(local!employees, fv!item, fv!index + 2)
                        ),
                        a!save(
                          local!employees,
                          remove(local!employees, fv!index)
                        )
                      }
                    )
                  }
                )
              ),
              size: "ICON"
            ),
            a!imageField(
              label: "delete " & fv!index,
              images: a!documentImage(
                document: a!iconIndicator("ADD"),
                caption: "Add Data",
                link: a!dynamicLink(
                  value: fv!index,
                  saveInto: {
                    a!save(
                      local!employees,
                      insert(
                        local!employees,
                        { today: today(), todayMinusOne: today() - 7,  },
                        fv!index + 1
                      )
                    )
                  }
                )
              ),
              size: "ICON"
            ),
            a!imageField(
              label: "delete " & fv!index,
              images: a!documentImage(
                document: a!iconIndicator("REMOVE"),
                altText: "Remove Employee",
                caption: "Remove " & fv!item.firstName & " " & fv!item.lastName,
                link: a!dynamicLink(
                  value: fv!index,
                  saveInto: {
                    a!save(
                      local!employees,
                      remove(local!employees, save!value)
                    )
                  }
                )
              ),
              size: "ICON"
            )
          },
          id: fv!index
        )
      ),
      addRowlink: a!dynamicLink(
        label: "Add New Data",
        value: {
          id: count(local!employees) + 1,
          today: today() + 1,
          todayMinusOne: today() + 1 - 8,

        },
        saveInto: {
          a!save(
            local!employees,
            append(local!employees, save!value)
          )
        }
      ),
      rowHeader: 1,
      shadeAlternateRows: false(),
      borderStyle: "LIGHT"
    )
  }
)

Let’s plan to reconvene with some exciting updates on Appian next time. Take care, stay informed, and stay well.