JavaScript API ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਝਾਂਕੀ ਦੇ ਪੈਰਾਮੀਟਰਾਂ ਲਈ ਇੱਕ ਇੰਟਰਐਕਟਿਵ ਡ੍ਰੌਪਡਾਉਨ ਬਣਾਉਣਾ

ਝਾਂਕੀ ਦੇ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ ਇੱਕ ਇੰਟਰਐਕਟਿਵ ਡ੍ਰੌਪਡਾਉਨ ਬਣਾਉਣਾ

ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਲੋਡ ਕਰਨ ਅਤੇ ਅੱਪਡੇਟ ਕਰਨ ਲਈ ਟੇਬਲਯੂ ਏਮਬੈਡਿੰਗ API ਦੇ ਨਾਲ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਨਾ

// 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");
});

ਵੱਖ-ਵੱਖ ਵਾਤਾਵਰਣਾਂ ਵਿੱਚ ਝਾਂਕੀ ਪੈਰਾਮੀਟਰ ਪਰਸਪਰ ਪ੍ਰਭਾਵ ਦੀ ਜਾਂਚ ਕਰਨਾ

ਪੈਰਾਮੀਟਰ ਅੱਪਡੇਟਾਂ ਨੂੰ ਪ੍ਰਮਾਣਿਤ ਕਰਨ ਲਈ JavaScript ਨਾਲ ਯੂਨਿਟ ਟੈਸਟ ਲਿਖਣਾ

// 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");
});

Tableau API ਵਿੱਚ ਪੈਰਾਮੀਟਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਬਾਰੇ ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ

1. ਝਾਂਕੀ ਵਿੱਚ ਪੈਰਾਮੀਟਰ ਅਤੇ ਫਿਲਟਰ ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ?
2. ਪੈਰਾਮੀਟਰ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਡੈਸ਼ਬੋਰਡ ਵਿੱਚ ਖਾਸ ਮੁੱਲਾਂ ਨੂੰ ਪਾਸ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ, ਜਦੋਂ ਕਿ ਫਿਲਟਰ ਮਾਪਦੰਡ ਦੇ ਆਧਾਰ 'ਤੇ ਦਿਖਾਏ ਗਏ ਡੇਟਾ ਨੂੰ ਸੀਮਿਤ ਕਰਦੇ ਹਨ। ਫਿਲਟਰ ਡੇਟਾਸੇਟਾਂ 'ਤੇ ਕੰਮ ਕਰਦੇ ਹਨ, ਜਦੋਂ ਕਿ ਪੈਰਾਮੀਟਰ ਖਾਸ ਖੇਤਰਾਂ ਜਾਂ ਗਣਨਾਵਾਂ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦੇ ਹਨ।
3. ਪੈਰਾਮੀਟਰ ਪ੍ਰਾਪਤ ਕਰਨ ਵੇਲੇ ਮੇਰਾ ਡ੍ਰੌਪਡਾਉਨ ਖਾਲੀ ਕਿਉਂ ਰਹਿੰਦਾ ਹੈ?
4. ਯਕੀਨੀ ਬਣਾਓ ਕਿ getParametersAsync() ਫੰਕਸ਼ਨ ਪੈਰਾਮੀਟਰ ਨੂੰ ਸਫਲਤਾਪੂਰਵਕ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਅਜਿਹਾ ਨਹੀਂ ਹੁੰਦਾ, ਤਾਂ ਪੈਰਾਮੀਟਰ ਲੁਕਿਆ ਹੋਇਆ ਜਾਂ ਵਰਕਬੁੱਕ ਪਾਬੰਦੀਆਂ ਕਾਰਨ ਪਹੁੰਚਯੋਗ ਨਹੀਂ ਹੋ ਸਕਦਾ ਹੈ।
5. ਮੈਂ ਕਿਵੇਂ ਯਕੀਨੀ ਬਣਾਵਾਂ ਕਿ ਡਰਾਪਡਾਉਨ ਪੈਰਾਮੀਟਰ ਦੀ ਮੌਜੂਦਾ ਸਥਿਤੀ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ?
6. ਦੀ ਵਰਤੋਂ ਕਰੋ currentValue.value ਡ੍ਰੌਪਡਾਉਨ ਵਿੱਚ ਡਿਫੌਲਟ ਵਿਕਲਪ ਸੈੱਟ ਕਰਨ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾ। ਇਹ UI ਅਤੇ ਡੈਸ਼ਬੋਰਡ ਨੂੰ ਇਕਸਾਰ ਰੱਖਦਾ ਹੈ।
7. ਝਾਂਕੀ ਵਿੱਚ ਮਾਪਦੰਡਾਂ ਨੂੰ ਅੱਪਡੇਟ ਕਰਦੇ ਸਮੇਂ ਮੈਂ ਗਲਤੀਆਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲ ਸਕਦਾ ਹਾਂ?
8. ਨੂੰ ਸਮੇਟਣਾ changeParameterValueAsync() ਅੰਦਰ ਕਾਲ ਕਰੋ try-catch ਪੈਰਾਮੀਟਰ ਅੱਪਡੇਟ ਹੋਣ 'ਤੇ ਹੋਣ ਵਾਲੀਆਂ ਕਿਸੇ ਵੀ ਤਰੁੱਟੀਆਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਬਲਾਕ ਕਰੋ।
9. ਕਿਹੜੀ ਘਟਨਾ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਤੋਂ ਪਹਿਲਾਂ ਡੈਸ਼ਬੋਰਡ ਤਿਆਰ ਹੈ?
10. ਦ FirstInteractive Tableau API ਵਿੱਚ ਇਵੈਂਟ ਸੰਕੇਤ ਦਿੰਦਾ ਹੈ ਕਿ ਡੈਸ਼ਬੋਰਡ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੋ ਗਿਆ ਹੈ ਅਤੇ ਇੱਕ ਡ੍ਰੌਪਡਾਉਨ ਜੋੜਨ ਵਰਗੇ ਹੋਰ ਪਰਸਪਰ ਪ੍ਰਭਾਵ ਲਈ ਤਿਆਰ ਹੈ।

ਇੰਟਰਐਕਟਿਵ ਪੈਰਾਮੀਟਰ ਹੈਂਡਲਿੰਗ 'ਤੇ ਅੰਤਿਮ ਵਿਚਾਰ

ਪੈਰਾਮੀਟਰਾਈਜ਼ਡ ਡ੍ਰੌਪਡਾਉਨ ਦੇ ਨਾਲ ਇੰਟਰਐਕਟਿਵ ਡੈਸ਼ਬੋਰਡਾਂ ਨੂੰ ਏਮਬੈਡ ਕਰਨਾ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਵਧੇਰੇ ਲਚਕਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇੱਕ ਸਹੀ ਸੈੱਟਅੱਪ ਦੇ ਨਾਲ, ਡਿਵੈਲਪਰ ਵਰਗੇ ਪੈਰਾਮੀਟਰ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਨ ਮੋਏਦਾ ਅਤੇ ਡੈਸ਼ਬੋਰਡ ਨਿਯੰਤਰਣ ਨੂੰ ਵਧਾਉਣ ਲਈ ਝਾਂਕੀ API ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਸੈੱਟਅੱਪ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਵਧੇਰੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਡੇਟਾ ਦੀ ਪੜਚੋਲ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।

ਮੁੱਖ ਤੱਤ, ਜਿਵੇਂ ਕਿ ਪਹਿਲਾ ਇੰਟਰਐਕਟਿਵ ਇਵੈਂਟ ਅਤੇ ਮਜਬੂਤ ਗਲਤੀ ਹੈਂਡਲਿੰਗ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਅੰਦਰ ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ। ਇਸ ਪਹੁੰਚ ਦੀ ਪਾਲਣਾ ਕਰਕੇ, ਡਿਵੈਲਪਰ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਪ੍ਰਬੰਧਿਤ ਕਰ ਸਕਦੇ ਹਨ ਅਤੇ ਅੰਤਮ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇੱਕ ਗਤੀਸ਼ੀਲ ਅਤੇ ਜਵਾਬਦੇਹ ਡੈਸ਼ਬੋਰਡ ਅਨੁਭਵ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰ ਸਕਦੇ ਹਨ।