DynamicLink and GridField

Hello:

I have the following code and the 'assessment score' (which, for now, is a value generated by a rand() function) changes value when I click on the 'Show details' icon.  Is there a way to prevent that from happening?

Thanks!

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",
      pto: 15,
      startDate: today() - 500
    ),
    a!map(
      id: 22,
      name: "Michael Johnson",
      role: "Payroll Manager",
      team: "Accounts Payable",
      pto: 2,
      startDate: today() - 100
    ),
    a!map(
      id: 33,
      name: "John Smith",
      role: "Quality Engineer",
      team: "User Acceptance Testing",
      pto: 5,
      startDate: today() - 1000
    ),
    a!map(
      id: 44,
      name: "Diana Hellstrom",
      role: "UX Designer",
      team: "User Experience",
      pto: 49,
      startDate: today() - 1200
    ),
    a!map(
      id: 55,
      name: "Francois Morin",
      role: "Account Executive",
      team: "Commercial North America",
      pto: 15,
      startDate: today() - 700
    ),
    a!map(
      id: 66,
      name: "Maya Kapoor",
      role: "Regional Director",
      team: "Front-End Components",
      pto: 15,
      startDate: today() - 1400
    ),
    a!map(
      id: 77,
      name: "Anthony Wu",
      role: "Benefits Coordinator",
      team: "Accounts Payable",
      pto: 2,
      startDate: today() - 300
    ),
    
  },
  /* 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(
                          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))
                )
              }
            ),
            
          }
        )
      }
    )
  }
)

  Discussion posts and replies are publicly visible

  • 0
    Certified Lead Developer
    in reply to MaNa

    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.