Skip to content

Script Examples

Moving Field values from one Tab to another

While our Tab component currently lacks built-in support for moving tabs, this functionality is slated for inclusion in future Studio versions. In the meantime, users can use the provided example to manually transfer field values between tabs.

In this example, we created two buttons that served as the navigation buttons to move our values from one tab to another.

The function movePlayerInfo() is used called when the either of the button is clicked. this function takes in a direction parameter. this function then calls the swapValues()function which takes in three parameters, the index in the Tabs component in which the field value is to be moved and the array of Field values to be moved.

Download EZui File

UI Builder Script(TabSwapValue.ezui) 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
prevPlayer.onClick = () => movePlayerInfo(-1);
nextPlayer.onClick = () => movePlayerInfo(1);

function enableDistablePlayerButtons() {
  prevPlayer.disabled = (playerInfo.value === 0);
  nextPlayer.disabled = (playerInfo.value === 2);
}

playerInfo.onChange = enableDistablePlayerButtons;
enableDistablePlayerButtons();

function movePlayerInfo(direction: 1 | -1 ) {
  const index1 = playerInfo.value;
  const index2 = index1 + direction;
  playerInfo.value = index2;
  swapValues(index1, index2, [
    'FirstName',
    'LastName',
    'Position',
    'Image',
    'matches',
    'winrate',
  ]);

}

function swapValues(index1: number, index2: number, variables: string[]) {
  for (const variable of variables) {
    const element1 = findElement(`${variable}${index1}`);
    const element2 = findElement(`${variable}${index2}`);
    if (!element1 || !element2)
      continue;

    const temp = element1.value;
    element1.value = element2.value;
    element2.value = temp;
  }
}