DynamicLink and GridField

Hi Mana,

Your rand() function is being called every time the component interacts. Try adding a field to your employees' variable and calling them in the grid column. It will work. Try the new code. 

a!localVariables(
  /* We load the employee data into this variable. If you are populating
     this variable with a query, you would put .data at the end before passing
     it to the grid. */
  local!employees: 
{
    a!map(
      id: 11,
      name: "Elizabeth Ward",
      role: "Senior Engineer",
      team: "Front-End Components",
      assessmentScore:rand(1),
      pto: 15,
      startDate: today() - 500
    ),
    a!map(
      id: 22,
      name: "Michael Johnson",
      role: "Payroll Manager",
      team: "Accounts Payable",
      assessmentScore:rand(1),
      pto: 2,
      startDate: today() - 100
    ),
    a!map(
      id: 33,
      name: "John Smith",
      role: "Quality Engineer",
      team: "User Acceptance Testing",
      assessmentScore:rand(1),
      pto: 5,
      startDate: today() - 1000
    ),
    a!map(
      id: 44,
      name: "Diana Hellstrom",
      role: "UX Designer",
      team: "User Experience",
      assessmentScore:rand(1),
      pto: 49,
      startDate: today() - 1200
    ),
    a!map(
      id: 55,
      name: "Francois Morin",
      role: "Account Executive",
      team: "Commercial North America",
      assessmentScore:rand(1),
      pto: 15,
      startDate: today() - 700
    ),
    a!map(
      id: 66,
      name: "Maya Kapoor",
      role: "Regional Director",
      team: "Front-End Components",
      assessmentScore:rand(1),
      pto: 15,
      startDate: today() - 1400
    ),
    a!map(
      id: 77,
      name: "Anthony Wu",
      role: "Benefits Coordinator",
      team: "Accounts Payable",
      assessmentScore:rand(1),
      pto: 2,
      startDate: today() - 300
    ),

  },
  /*refreshOnReferencedVarChange: false),*/
  /* local!teamList would normally come from a constant or data source. */
  local!teamList: {
    "Accounts Payable",
    "User Acceptance Testing",
    "User Experience",
    "Commercial North America",
    "Front-End Components"
  },
  /* This variable is for storing the grid's selection. */
  local!selection,
  /* This variable is used to for the full row of data on the selected item
     to be passed to the details section of the interface. */
  local!selectedEmployee,
  local!readOnly: true,
  {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!sectionLayout(
              label: "Employees",
              contents: {
                a!gridField(
                  data: local!employees,
                  columns: {
                    a!gridColumn(label: "Name", value: fv!row.name),
                    a!gridColumn(
                      label: "Assessment Score",
                      value: a!richTextDisplayField(
                        value: if(
                          todecimal(fv!row.assessmentScore) < 0.5,
                          /*rand(1)<0.5,*/
                          a!richTextIcon(icon: "thumbs-up", color: "POSITIVE"),
                          a!richTextIcon(icon: "thumbs-down", color: "NEGATIVE")
                        )
                      ),
                      align: "CENTER"
                    ),
                    a!gridColumn(
                      align: "CENTER",
                      label: "Show Details",
                      value: a!richTextDisplayField(
                        value: a!richTextIcon(
                          icon: "search-plus",
                          link: a!dynamicLink(
                            value: fv!row,
                            saveInto: {local!selectedEmployee,local!selection}

                          ),
                          linkStyle: "STANDALONE"
                        )
                      )
                    )
                  },
                  pageSize: 10,
                  shadeAlternateRows: false,
                  rowHeader: 1
                )
              }
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!sectionLayout(
              label: "Details",
              contents: {
                a!richTextDisplayField(
                  value: a!richTextItem(
                    text: "No employee selected.",
                    color: "SECONDARY",
                    size: "MEDIUM",
                    style: "EMPHASIS"
                  ),
                  showWhen: isnull(local!selection)
                ),
                a!columnsLayout(
                  columns: {
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "Name",
                          value: local!selectedEmployee.name,
                          readOnly: true
                        ),
                        a!textField(
                          label: "Department",
                          value: local!selectedEmployee.age,
                          readOnly: true
                        )
                      },
                      width: "MEDIUM"
                    ),
                    a!columnLayout(
                      contents: {
                        /* In the following fields, we display from, and save to
                           local!selectedEmployee. */
                        a!textField(
                          label: "Role",
                          value: local!selectedEmployee.role,
                          saveInto: local!selectedEmployee.role,
                          readOnly: local!readOnly
                        ),
                        /* Because dropdown components can't be readOnly, we use a textField to
                           display the value and an if() statement to swap it out for the dropdown
                           when it's time to edit. */
                        if(
                          local!readOnly,
                          a!textField(
                            label: "Team",
                            value: local!selectedEmployee.team,
                            readOnly: true
                          ),
                          a!dropdownField(
                            label: "Team",
                            choiceLabels: local!teamList,
                            choiceValues: local!teamList,
                            value: local!selectedEmployee.team,
                            saveInto: local!selectedEmployee.team,
                            disabled: local!readOnly
                          )
                        ),
                        /* The link enables editing in the other components, and is hidden when
                           editing is enabled. */

                      },
                      width: "WIDE"
                    )
                 
                  },
                  showWhen: not(isnull(local!selection))
                )
              }
            ),

          }
        )
      }
    )
  }
)

Hi Subhad:

Thanks for your reply/suggestion - this solution works!  Meantime, I am trying to understand why the refreshOnReferencedVarChange is being trigged because as per the documentation "When true, grid data will be refreshed each time the value of any variable referenced in the data parameter is updated" - the default is true.  I am not changing any values in data parameter when the 'show details' icon is clicked.

Ma

I think you got the answer already. To add to Sanchit's response, the behavior of the assessment score is because of the rand() function that is called directly. It would be the same for other functions as well like the now() function. The function will be called when the interface is loaded and every time the component is refreshed where the function is used. 

To avoid it, you can use the function inside a local variable and use it everywhere else in your interface. 

I think you got the answer already. To add to Sanchit's response, the behavior of the assessment score is because of the rand() function that is called directly. It would be the same for other functions as well like the now() function. The function will be called when the interface is loaded and every time the component is refreshed where the function is used. 

To avoid it, you can use the function inside a local variable and use it everywhere else in your interface.