Креирање интерактивног падајућег менија за параметре табеле помоћу ЈаваСцрипт АПИ-ја

Креирање интерактивног падајућег менија за контролу параметара табеле

Коришћење ЈаваСцрипт-а са АПИ-јем за уграђивање Таблеау за динамичко учитавање и ажурирање параметара

// Solution 1: Basic Implementation Using Async/Await and Tableau API
async function loadMoedaParameter() {
  try {
    const parameters = await viz.workbook.getParametersAsync();
    const moedaParam = parameters.find((p) => p.name === "Moeda");
    if (!moedaParam) {
      console.error("Parameter 'Moeda' not found!");
      return;
    }
    const dropdown = document.createElement("select");
    moedaParam.allowableValues.forEach((value) => {
      const option = document.createElement("option");
      option.text = value.formattedValue;
      option.value = value.value;
      dropdown.appendChild(option);
    });
    dropdown.value = moedaParam.currentValue.value;
    dropdown.addEventListener("change", async (e) => {
      const selectedMoeda = e.target.value;
      try {
        await viz.workbook.changeParameterValueAsync("Moeda", selectedMoeda);
        console.log("Moeda changed to:", selectedMoeda);
      } catch (error) {
        console.error("Error changing the Moeda parameter:", error);
      }
    });
    document.getElementById("Moeda-container-desktop").appendChild(dropdown);
  } catch (error) {
    console.error("Error loading the Moeda parameter:", error);
  }
}
viz.addEventListener(TableauEventType.FirstInteractive, loadMoedaParameter);

Имплементација модуларне падајуће логике за ажурирања параметара табеле

Оптимизован приступ користећи модуларне функције и побољшано руковање грешкама

// Solution 2: Modular and Reusable Code with Error Handling
function createDropdown(options, onChangeCallback) {
  const dropdown = document.createElement("select");
  dropdown.style.cssText = "border:none; width:100%; height:40px; background:#FFF;";
  options.forEach(({ text, value }) => {
    const option = document.createElement("option");
    option.text = text;
    option.value = value;
    dropdown.appendChild(option);
  });
  dropdown.addEventListener("change", (e) => onChangeCallback(e.target.value));
  return dropdown;
}

async function updateParameter(parameterName, value) {
  try {
    await viz.workbook.changeParameterValueAsync(parameterName, value);
    console.log(\`${parameterName} changed to: \${value}\`);
  } catch (error) {
    console.error("Error updating parameter:", error);
  }
}

async function loadParameterDropdown(containerId, parameterName) {
  try {
    const parameters = await viz.workbook.getParametersAsync();
    const param = parameters.find((p) => p.name === parameterName);
    if (!param) throw new Error(\`Parameter '\${parameterName}' not found!\`);
    const options = param.allowableValues.map((val) => ({
      text: val.formattedValue,
      value: val.value,
    }));
    const dropdown = createDropdown(options, (value) => {
      updateParameter(parameterName, value);
    });
    document.getElementById(containerId).appendChild(dropdown);
  } catch (error) {
    console.error("Error loading parameter dropdown:", error);
  }
}

viz.addEventListener(TableauEventType.FirstInteractive, () => {
  loadParameterDropdown("Moeda-container-desktop", "Moeda");
});

Тестирање интеракције параметара табеле у различитим окружењима

Писање јединичних тестова са ЈаваСцрипт-ом за проверу ажурирања параметара

// Solution 3: Unit Test to Validate Parameter Changes
function mockVizWorkbook() {
  return {
    parameters: [{
      name: "Moeda",
      allowableValues: [{ value: "USD", formattedValue: "USD" }],
      currentValue: { value: "USD" },
    }],
    changeParameterValueAsync: jest.fn().mockResolvedValue(),
  };
}

test("Dropdown updates Moeda parameter correctly", async () => {
  const vizMock = { workbook: mockVizWorkbook() };
  const updateSpy = vizMock.workbook.changeParameterValueAsync;
  document.body.innerHTML = '<div id="Moeda-container-desktop"></div>'; 

  await loadParameterDropdown("Moeda-container-desktop", "Moeda");
  const dropdown = document.querySelector("select");
  dropdown.value = "USD";
  dropdown.dispatchEvent(new Event("change"));

  expect(updateSpy).toHaveBeenCalledWith("Moeda", "USD");
});

Често постављана питања о коришћењу параметара у Таблеау АПИ-ју

1. Која је разлика између параметра и филтера у Таблеау-у?
2. Параметри омогућавају корисницима да прослеђују одређене вредности на контролну таблу, док филтери ограничавају приказане податке на основу критеријума. Филтери делују на скупове података, док параметри утичу на одређена поља или прорачуне.
3. Зашто мој падајући мени остаје празан приликом преузимања параметара?
4. Уверите се да getParametersAsync() функција успешно преузима параметар. Ако није, параметар може бити скривен или недоступан због ограничења радне свеске.
5. Како да осигурам да падајући мени одговара тренутном стању параметра?
6. Користите currentValue.value својство да поставите подразумевану опцију у падајућем менију. Ово одржава УИ и контролну таблу усклађеним.
7. Како могу да решим грешке приликом ажурирања параметара у Таблеау-у?
8. Замотајте changeParameterValueAsync() позив унутра а try-catch блок за руковање свим грешкама које се јављају када се параметар ажурира.
9. Који догађај осигурава да је контролна табла спремна пре прилагођавања?
10. Тхе FirstInteractive догађај у Таблеау АПИ-ју сигнализира да се контролна табла у потпуности учитала и да је спремна за даље интеракције као што је додавање падајућег менија.

Завршна размишљања о интерактивном руковању параметрима

Уграђивање интерактивних контролних табли са параметризованим падајућим менијима нуди већу флексибилност корисницима. Уз правилно подешавање, програмери могу да дохвате параметре као што су Моеда и користите Таблеау АПИ за побољшање контроле контролне табле. Ово подешавање омогућава корисницима да ефикасније истражују податке.

Кључни елементи, као што су ФирстИнтерацтиве догађајима и робусно руковање грешкама, обезбедите да падајући менији раде несметано у оквиру апликације. Пратећи овај приступ, програмери могу ефикасно управљати параметрима и понудити крајњим корисницима динамично и брзо искуство контролне табле.