User Interface

Can you please elaborate more

ok, I need to implement one grid with all request Ids related to the cif. One cif may have one one request,other cif may have multiple request. The grid structure as shown above and dynamic grid. examples( cif-112233 may have 123456,786535 requests and other cif may have cif-345678 ,requests(432167,654328,876543,7655433) like so on

) 

a!localVariables(
  local!approvedCAs: rule!CR_QE_getApprovedCAsByFilters(
    cif_int: ri!cif_int,
    requestId_int: ri!requestId_int
  ),
  local!selectedButton: joinarray(
    {
      index(
        ri!crModuleStatus_cdt,
        "requestId_int",
        {}
      ) & if(
        or(
          rule!APN_isBlank(
            index(
              ri!crModuleStatus_cdt,
              "versionNo_int",
              {}
            )
          ),
          rule!APN_isZero(
            index(
              ri!crModuleStatus_cdt,
              "versionNo_int",
              {}
            )
          )
        ),
        "",
        "." & index(
          ri!crModuleStatus_cdt,
          "versionNo_int",
          {}
        )
      ),
      index(
        ri!crModuleStatus_cdt,
        "actionType_txt",
        {}
      ),
      index(
        ri!crModuleStatus_cdt,
        "approvedOn_dt",
        {}
      )
    },
    " - "
  ),
  {
    rule!CR_APP_RT_displayApproverInfoNote(
      message_txt: "Select workflow to see the Request data"
    ),
    a!sideBySideLayout(
      items: {
        a!sideBySideItem(
          item: a!buttonArrayLayout(
            buttons: {
              a!forEach(
                items: joinarray(
                  {
                    index(
                      ri!crModuleStatus_cdt,
                      "requestId_int",
                      
                      {}
                    ) & if(
                      or(
                        rule!APN_isBlank(
                          index(
                            ri!crModuleStatus_cdt,
                            "versionNo_int",
                            {}
                          )
                        ),
                        rule!APN_isZero(
                          index(
                            ri!crModuleStatus_cdt,
                            "versionNo_int",
                            {}
                          )
                        )
                      ),
                      "",
                      "." & index(
                        ri!crModuleStatus_cdt,
                        "versionNo_int",
                        {}
                      ),
                      
                    ),
                    index(
                      ri!crModuleStatus_cdt,
                      "actionType_txt",
                      {}
                    ),
                    index(
                      ri!crModuleStatus_cdt,
                      "approvedOn_dt",
                      {}
                    )
                  },
                  " - "
                ),
                expression: {
                  a!buttonWidget(
                    label: fv!item,
                    value: fv!item,
                    saveInto: local!selectedButton,
                    size: if(
                      local!selectedButton = fv!item,
                      "STANDARD",
                      "SMALL"
                    ),
                    style: if(
                      local!selectedButton = fv!item,
                      "PRIMARY",
                      "LINK"
                    )
                  )
                }
              )
            },
            align: "START",
            showWhen: ri!workFlow_bool
          )
        ),
        a!sideBySideItem(
          item: a!buttonArrayLayout(
            buttons: {
              a!buttonWidget(
                label: "Completed Requests",
                style: "PRIMARY"
              )
            },
            align: "START",
            
          )
        ),
        
      }
    )
  }
)

And the result I am getting as this But Result should be in seperate button /action ,How would I achieve this?

sid 
If you are expecting similar to below grid



Then refer this code for understanding

a!localVariables(
  local!data: {
    a!map(
      cif: "cif1",
      request: { "request1", "request2" }
    ),
    a!map(
      cif: "cif2",
      request: { "request3", "request4", "request5" }
    ),
    a!map(cif: "cif3", request: { "request6" })
  },
  {
    a!gridField(
      labelPosition: "ABOVE",
      data: local!data,
      columns: {
        a!gridColumn(label: "CIF", value: fv!row.cif),
        a!gridColumn(
          label: "Requests",
          value: a!buttonArrayLayout(
            buttons: a!forEach(
              items: fv!row.request,
              expression: a!buttonWidget(label: fv!item, value: fv!item)
            )
          )
        )
      }
    )
  }
)

I usually implement such things with multiple entries listed in one column cell - one example is what Shubham provided already, though often I simply display each entry on its own line (and if there can potentially be many many entries, i'll only show the first few unless the user clicks an internal dynamic link to expand the selection).

a!localVariables(
  local!data: a!map(
    request: rule!CR_QE_getApprovedCAsByFilters(
      requestId_int: ri!requestId_int,
      cif_int: ri!cif_int
    )
  ),
  {
    a!gridField(
      labelPosition: "ABOVE",
      data: local!data,
      columns: {
        a!gridColumn(
          label: "Requests",
          value: a!buttonArrayLayout(
            buttons: a!forEach(
              items: fv!row.request,
              expression: a!buttonWidget(label: fv!item, value: fv!item)
            )
          )
        )
      }
    )
  }
)

Here is My code, And result I am getting is this,Please correct where I went wrong hereAnd can we make it as side by side instead of Grid Bcoz User wants as side by side tab.

Under Request Structure you might need to choose correct column for example under request it should be id_int something else.


Yes you can change from grid to side by side layout.

a!localVariables(
  local!data: rule!CR_QE_getApprovedCAsByFilters(
    requestId_int: ri!requestId_int,
    cif_int: ri!cif_int
  ),
  {
    a!buttonArrayLayout(
      buttons: a!forEach(
        items: local!data,
        expression: a!buttonWidget(
          label: fv!item.id_int,
          /*Replace "id_int" with field which you want to display as label.*/
          value: fv!item.id_int/*Replace "id_int" with field which you want to display as label.*/

        )
      )
    )
  }
)

a!localVariables(
  local!moduleStatus: a!map(
    request: rule!CR_QE_getApprovedCAsByFilters(
      requestId_int: ri!requestId_int,
      cif_int: ri!cif_int
    )
  ),
  {
    a!gridField(
      labelPosition: "ABOVE",
      data: local!moduleStatus,
      columns: {
        a!gridColumn(
          value: a!buttonArrayLayout(
            buttons: a!forEach(
              items: fv!row.request,
              expression: a!buttonWidget(
                label: joinarray(
                  {fv!item.requestId_int & fv!item.actionType_txt & fv!item.approvedOn_dt},
                  " - "
                ),
                value: joinarray(
                  {fv!item.requestId_int & fv!item.actionType_txt & fv!item.approvedOn_dt},
                  " - "
                ),
              )
            )
          )
        )
      }
    )
  }
)

Ok thanks for your input, Shubham, I have written this code by adding few more things. Can we achieve as a side-by-side buttons by any chance?

Result I am getting is this

a!localVariables(
  local!moduleStatus: a!map(
    request: rule!CR_QE_getApprovedCAsByFilters(
      requestId_int: ri!requestId_int,
      cif_int: ri!cif_int
    )
  ),
  {
    a!buttonArrayLayout(
            buttons: a!forEach(
              items: fv!row.request,
              expression: a!buttonWidget(
                label: joinarray(
                  {fv!item.requestId_int & fv!item.actionType_txt & fv!item.approvedOn_dt},
                  " - "
                ),
                value: joinarray(
                  {fv!item.requestId_int & fv!item.actionType_txt & fv!item.approvedOn_dt},
                  " - "
                )
              )
            )
          )
  }
)

As suggested by Mike, you can display a list:

a!localVariables(
  local!data: {
    a!map(cif: 1, requestId: { 1000, 1001, 1002 }),
    a!map(cif: 2, requestId: { 2000 })
  },
  a!gridField(
    label: "Read-only Grid",
    labelPosition: "ABOVE",
    data: local!data,
    columns: {
      a!gridColumn(label: "CIF", value: fv!row.cif),
      a!gridColumn(
        label: "CIF",
        value: a!richTextDisplayField(
          value: a!richTextBulletedList(items: fv!row.requestId)
        )
      )
    }
  )
)