Interaktiivisen pudotusvalikon luominen Tableau-parametreille JavaScript-sovellusliittymän avulla

Interaktiivisen pudotusvalikon luominen taulukkoparametrien hallitsemiseksi

JavaScriptin käyttäminen Tableau Embedding API:n kanssa parametrien lataamiseen ja päivittämiseen dynaamisesti

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

Modulaarisen pudotuslogiikan käyttöönotto Tableau-parametripäivityksiä varten

Optimoitu lähestymistapa modulaaristen toimintojen ja parannetun virheenkäsittelyn avulla

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

Tableau-parametrien vuorovaikutuksen testaus eri ympäristöissä

Yksikkötestien kirjoittaminen JavaScriptillä parametrien päivitysten vahvistamiseksi

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

Usein kysyttyjä kysymyksiä parametrien käyttämisestä Tableau API:ssa

1. Mitä eroa Tableaun parametrilla ja suodattimella on?
2. Parametrien avulla käyttäjät voivat välittää tiettyjä arvoja kojelautaan, kun taas suodattimet rajoittavat näytettävää dataa kriteerien perusteella. Suodattimet vaikuttavat tietosarjoihin, kun taas parametrit vaikuttavat tiettyihin kenttiin tai laskelmiin.
3. Miksi pudotusvalikkoni pysyy tyhjänä parametreja noudettaessa?
4. Varmista, että getParametersAsync() toiminto noutaa parametrin onnistuneesti. Jos näin ei ole, parametri saattaa olla piilotettu tai ei ole käytettävissä työkirjarajoitusten vuoksi.
5. Kuinka varmistan, että pudotusvalikko vastaa parametrin nykyistä tilaa?
6. Käytä currentValue.value -ominaisuus asettaaksesi oletusvaihtoehdon avattavassa valikossa. Tämä pitää käyttöliittymän ja kojelaudan kohdakkain.
7. Kuinka voin käsitellä virheitä päivitettäessä parametreja Tableaussa?
8. Kääri changeParameterValueAsync() soita sisään a try-catch lohko käsittelemään parametrin päivityksen yhteydessä ilmeneviä virheitä.
9. Mikä tapahtuma varmistaa, että kojelauta on valmis ennen mukauttamista?
10. The FirstInteractive Tapahtuma Tableau API:ssa ilmoittaa, että kojelauta on ladattu täyteen ja on valmis lisätoimiin, kuten avattavan valikon lisäämiseen.

Viimeisiä ajatuksia interaktiivisesta parametrien käsittelystä

Vuorovaikutteisten hallintapaneelien upottaminen parametroiduilla pudotusvalikoilla tarjoaa käyttäjille enemmän joustavuutta. Oikealla asetuksella kehittäjät voivat hakea parametreja, kuten Moeda ja käytä Tableau API:ta kojelaudan hallinnan parantamiseen. Tämän asennuksen avulla käyttäjät voivat tutkia tietoja tehokkaammin.

Avainelementit, kuten FirstInteractive tapahtumien ja vankan virheiden käsittelyn avulla varmistat, että pudotusvalikot toimivat sujuvasti sovelluksessa. Tätä lähestymistapaa noudattamalla kehittäjät voivat hallita parametreja tehokkaasti ja tarjota loppukäyttäjille dynaamisen ja reagoivan kojelautakokemuksen.