• State Suggested Answer
  • Replies 2 replies
  • Answers 2 answers
  • Subscribers 9 subscribers
  • Views 76 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

Editable Grid interface with rule input array, of type "Map"

Stephen Kane
Certified Associate Developer

Hi team
this is what my interface looks like:



my rule input is an array of data, using a map data type to pull in multiple records from the Software and related Software Category record types:

mappedValue (1 item)List of Map

[[decision:false,software:[SAL Software id=29, name= sint veniam magna, vendorName= commodo amet proident, softwareCategory=[SAL Software Category id=7, name=Custom Applications, description=software developed in-house to fulfil specific purposes]]; [SAL Software id=30, name=elit dolor nostrud, vendorName=dolor pariatur nulla, softwareCategory=[SAL Software Category id=6, name=Component, description=required for other software to run]]; [SAL Software id=31, name=Adobe Acrobat, vendorName=Microsoft, softwareCategory=[SAL Software Category id=10, name=Paul Test Category, description=Paul Test Category]]; [SAL Software id=32, name=Microsoft CRM, vendorName=Microsoft, softwareCategory=[SAL Software Category id=7, name=Custom Applications, description=software developed in-house to fulfil specific purposes]]; [SAL Software id=33, name=Microsoft CR#, vendorName=Microsoft, softwareCategory=[SAL Software Category id=6, name=Component, description=required for other software to run]]]]
[1]

[decision:false,software:[SAL Software id=29, name= sint veniam magna, vendorName= commodo amet proident, softwareCategory=[SAL Software Category id=7, name=Custom Applications, description=software developed in-house to fulfil specific purposes]]; [SAL Software id=30, name=elit dolor nostrud, vendorName=dolor pariatur nulla, softwareCategory=[SAL Software Category id=6, name=Component, description=required for other software to run]]; [SAL Software id=31, name=Adobe Acrobat, vendorName=Microsoft, softwareCategory=[SAL Software Category id=10, name=Paul Test Category, description=Paul Test Category]]; [SAL Software id=32, name=Microsoft CRM, vendorName=Microsoft, softwareCategory=[SAL Software Category id=7, name=Custom Applications, description=software developed in-house to fulfil specific purposes]]; [SAL Software id=33, name=Microsoft CR#, vendorName=Microsoft, softwareCategory=[SAL Software Category id=6, name=Component, description=required for other software to run]]]
decision
software (5 items)

[[SAL Software id=29, name= sint veniam magna, vendorName= commodo amet proident, softwareCategory=[SAL Software Category id=7, name=Custom Applications, description=software developed in-house to fulfil specific purposes]]; [SAL Software id=30, name=elit dolor nostrud, vendorName=dolor pariatur nulla, softwareCategory=[SAL Software Category id=6, name=Component, description=required for other software to run]]; [SAL Software id=31, name=Adobe Acrobat, vendorName=Microsoft, softwareCategory=[SAL Software Category id=10, name=Paul Test Category, description=Paul Test Category]]; [SAL Software id=32, name=Microsoft CRM, vendorName=Microsoft, softwareCategory=[SAL Software Category id=7, name=Custom Applications, description=software developed in-house to fulfil specific purposes]]; [SAL Software id=33, name=Microsoft CR#, vendorName=Microsoft, softwareCategory=[SAL Software Category id=6, name=Component, description=required for other software to run]]]
[1]
id

29
name
vendorName
softwareCategory
id

7
name
description
[2]
id

30
name
vendorName
softwareCategory
[3]
id

31
name
vendorName
softwareCategory
id

10
name
description

I need the grid to:

  1. display each record on a separate row in a rich text field
  2. for each row allow a user to approve or reject a software title

Here is my existing code:

{
  a!gridLayout(
    label: "Editable Grid",
    labelPosition: "COLLAPSED",
    headerCells: {
      a!gridLayoutHeaderCell(label: "Software Name"),
      a!gridLayoutHeaderCell(label: "Category Name"),
      a!gridLayoutHeaderCell(label: "Category Description"),
      a!gridLayoutHeaderCell(label: "Vendor Name"),
      a!gridLayoutHeaderCell(label: "Approve")
    },
    columnConfigs: {
      a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
      a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
      a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 4),
      a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
      a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2)
    },
    rows: {
      a!gridRowLayout(
        contents: {
          a!forEach(
            items: ri!mappedValue,
            expression: a!richTextDisplayField(
              label: "software name",
              labelPosition: "COLLAPSED",
              value: ri!mappedValue.software['recordType!{3c22821a-4d0f-44ba-a24d-1a3895b73ee5}SAL Software.fields.{0ae76b0f-bde9-4531-afae-9eeff010f510}name']
            )
          ),
          a!forEach(
            items: ri!mappedValue,
            expression: a!richTextDisplayField(
              label: "software name",
              labelPosition: "COLLAPSED",
              value: ri!mappedValue.software['recordType!{3c22821a-4d0f-44ba-a24d-1a3895b73ee5}SAL Software.relationships.{970357d1-51c9-47e0-b392-ae5a82411fbd}softwareCategory.fields.{d1d89342-3003-42e0-81e8-12c2881347f8}name']
            )
          ),
          a!forEach(
            items: ri!mappedValue,
            expression: a!richTextDisplayField(
              label: "software name",
              labelPosition: "COLLAPSED",
              value: ri!mappedValue.software['recordType!{3c22821a-4d0f-44ba-a24d-1a3895b73ee5}SAL Software.relationships.{970357d1-51c9-47e0-b392-ae5a82411fbd}softwareCategory.fields.{b7ada85d-a525-4da6-ad48-ea85edce9e4a}description']
            )
          ),
          a!forEach(
            items: ri!mappedValue,
            expression: a!richTextDisplayField(
              label: "software name",
              labelPosition: "COLLAPSED",
              value: ri!mappedValue.software['recordType!{3c22821a-4d0f-44ba-a24d-1a3895b73ee5}SAL Software.fields.{cc2d14a8-79b8-428b-9610-6e45b0e17851}vendorName']
            )
          ),
          if(
            or(
              a!isNullOrEmpty(ri!readOnly),
              rule!APP_isFalse(ri!readOnly)
            ),
            a!forEach(
              items: ri!mappedValue,
              expression: a!radioButtonField(
                choiceLabels: { "Yes", "No" },
                choiceValues: { true, false },
                label: "approve/reject",
                labelPosition: "COLLAPSED",
                value: ri!mappedValue.decision,
                saveInto: ri!mappedValue.decision,
                required: false,
                choiceLayout: "COMPACT"
              )
            ),
            a!tagField(
              labelPosition: "COLLAPSED",
              tags: {
                if(
                  rule!APP_isTrue(ri!mappedValue.decision),
                  a!tagItem(
                    text: "APPROVED",
                    backgroundColor: "#0c9aba"
                  ),
                  a!tagItem(
                    text: "NOT APPROVED",
                    backgroundColor: "#FF9B78"
                  )
                )
              }
            )
          )
          
        },
        selectionDisabled: false
      )
    },
    selectionSaveInto: {},
    validations: {},
    shadeAlternateRows: false,
    borderStyle: "LIGHT"
    
  )
}

I know I need to use the forEach and index functions, but am no sure where and how to use them correctly

If you are able to help me, I would really appreciate you talking me through your approach so that I can learn how to do this going forward.

Blessings

Stephen

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    Your structure is incorrect for your rows.

    For an editable grid, "rows: {}" should contain an array of rows (one for each item in the data set you choose).

    Each row should be a single gridRowLayout() containing an array of components (one for each column).

    Instead what you have here is backwards, essentially you're creating a single row and then repeating each component multiple times.

    Just guessing, but you probably want a structure more like:

    rows: a!forEach(
  items: ri!mappedValue,
  expression: a!gridRowLayout(
    contents: { /* your individual components go here */ }
  )
)

Reply
  • 0
    Certified Lead Developer

    Your structure is incorrect for your rows.

    For an editable grid, "rows: {}" should contain an array of rows (one for each item in the data set you choose).

    Each row should be a single gridRowLayout() containing an array of components (one for each column).

    Instead what you have here is backwards, essentially you're creating a single row and then repeating each component multiple times.

    Just guessing, but you probably want a structure more like:

    rows: a!forEach(
  items: ri!mappedValue,
  expression: a!gridRowLayout(
    contents: { /* your individual components go here */ }
  )
)

Children
No Data
© 2025 Appian. All rights reserved.
We want to hear from you! Submit a review on Gartner or G2.