Grid Link and display text

a!localVariables(
  local!gridData:todatasubset({{id:1},{id:2},{id:3}}),
  local!selectedId,
  local!clicked:false(),
  local!display:{{id:1,name:"abc"},{id:2,name:"pqr"}},
  {
    
   a!gridField(
     label:"Click Links",
     data:local!gridData.data,
     columns: {
       a!gridColumn(
         label:"Link",
         value:a!linkField(
           label: fv!row.id,
           links:a!dynamicLink(label:fv!row.id,value:fv!row.id,
           saveInto: {local!selectedId,a!save(local!clicked,if(local!clicked,false,true))})
         )
       )
     }     
   ),
   a!textField(
     label:index(local!display.name,wherecontains(local!selectedId,tointeger(local!display.id))),
     showWhen: local!clicked
   )
  }
  
)

I have a grid field with links in multiple rows. Based on the selected link, a text field should be displayed. But, here's a twist, For eg, I have 3 links: Link 1, link2, link3.

On selecting link 1, data should be displayed based on the selection. On selecting the link again, it should dissappear. On selecting Link2, data should again display based on the selection. On selecting link 3 (while data2 is already displayed), instead of disappearing, data 3 should appear.

I have this code snippet, but it's taking two clicks to show the next data. I want to see the data when the user jumps from 1 link to another.

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    Here's how I'd suggest you re-write the above code:

    a!localVariables(
      local!gridData: todatasubset({ { id: 1 }, { id: 2 }, { id: 3 } }),
      local!selectedId: tointeger(null()),
      local!clicked: not(isnull(local!selectedId)),
      local!display: {
        { id: 1, name: "abc" },
        { id: 2, name: "pqr" }
      },
      {
    
        a!gridField(
          label:"Click Links",
          data:local!gridData.data,
          columns: {
            a!gridColumn(
              label:"Link",
              value: a!richTextDisplayField(
                value: a!richTextItem(
                  text: fv!row.id,
                  link: a!dynamicLink(
                    value: fv!row.id,
                    saveInto: {
                      local!selectedId
                    }
                  )
                )
              )
              /*a!linkField(*/
                /*label: fv!row.id,*/
                /*links: a!dynamicLink(*/
                  /*label: fv!row.id,*/
                  /*value: fv!row.id,*/
                  /*saveInto: {*/
                    /*local!selectedId,*/
                    /*a!save(*/
                      /*local!clicked,*/
                      /*if(local!clicked, false, true)*/
                    /*)*/
                  /*}*/
                /*)*/
              /*)*/
            )
          }     
        ),
        a!textField(
          label: index(
            local!display.name,
            wherecontains(
              local!selectedId,
              tointeger(local!display.id)
            )
          ),
          showWhen: local!clicked
        )
      }
    )

    Here we make use of the auto-updating nature of a!localVariables() values by setting "local!clicked" to simply key off of whether there's an ID selected.  That way, you don't need to waste an extra saveInto (and the accompanying if() logic surrounding it to determine its new value).

    Also - don't use a!linkField.  We have a!richTextDisplayField() now and it's far more usable, more flexible, etc.

Reply
  • 0
    Certified Lead Developer

    Here's how I'd suggest you re-write the above code:

    a!localVariables(
      local!gridData: todatasubset({ { id: 1 }, { id: 2 }, { id: 3 } }),
      local!selectedId: tointeger(null()),
      local!clicked: not(isnull(local!selectedId)),
      local!display: {
        { id: 1, name: "abc" },
        { id: 2, name: "pqr" }
      },
      {
    
        a!gridField(
          label:"Click Links",
          data:local!gridData.data,
          columns: {
            a!gridColumn(
              label:"Link",
              value: a!richTextDisplayField(
                value: a!richTextItem(
                  text: fv!row.id,
                  link: a!dynamicLink(
                    value: fv!row.id,
                    saveInto: {
                      local!selectedId
                    }
                  )
                )
              )
              /*a!linkField(*/
                /*label: fv!row.id,*/
                /*links: a!dynamicLink(*/
                  /*label: fv!row.id,*/
                  /*value: fv!row.id,*/
                  /*saveInto: {*/
                    /*local!selectedId,*/
                    /*a!save(*/
                      /*local!clicked,*/
                      /*if(local!clicked, false, true)*/
                    /*)*/
                  /*}*/
                /*)*/
              /*)*/
            )
          }     
        ),
        a!textField(
          label: index(
            local!display.name,
            wherecontains(
              local!selectedId,
              tointeger(local!display.id)
            )
          ),
          showWhen: local!clicked
        )
      }
    )

    Here we make use of the auto-updating nature of a!localVariables() values by setting "local!clicked" to simply key off of whether there's an ID selected.  That way, you don't need to waste an extra saveInto (and the accompanying if() logic surrounding it to determine its new value).

    Also - don't use a!linkField.  We have a!richTextDisplayField() now and it's far more usable, more flexible, etc.

Children