Get a Fire Event value into a Variable

Support, Troubleshooting, & Help
1

How can I store the selected item into a variable from the event? I mean I want to use that variable inside my Tulip app
If you look at the screenshot, It says that the event has been fired, but I’m not able to catch the value in tulip player

image
image1863×885 100 KB

The intention of this, is to create a button from each row from an array and then select the desired value

This is the code I used in Javascript:

let selectedItem = null;
const widgetContainer = document.getElementById(“widgetContainer”);

function fireEvent(eventName, eventData) {
console.log(“Evento disparado:”, eventName, “Datos:”, eventData);
const event = new CustomEvent(eventName, { detail: eventData });
document.dispatchEvent(event);
}

let dataArray = ;

const handlePropChange = (newValue) => {

dataArray = newValue.map((item) => {
const [
Location,
PartNumber,
LotSerial,
Reference,
QOH,
Site,
Expirationdate,
] = item.split(“,”);
return {
Location,
partNumber: PartNumber,
LotSerial,
Reference,
QOH,
Site,
Expirationdate,
};
});
updateUI();
};

const updateUI = () => {

widgetContainer.innerHTML = “”;

dataArray.forEach((item, index) => {
const element = document.createElement(“div”);
element.className = “item”;

const button = document.createElement("button");
button.innerText = `Select`;
button.className = "button";
button.onclick = () => {
  selectedPart(item);
};
element.appendChild(button);

const info = document.createElement("div");
info.innerHTML = `
    <strong>Part Number:</strong> ${item.partNumber}<br>
    <strong>Location:</strong> ${item.Location}<br>
    <strong>Quantity on Hand:</strong> ${item.QOH}<br>
    <strong>Lot Serial:</strong> ${item.LotSerial}<br>
    <strong>Reference:</strong> ${item.Reference}<br>
    <strong>Expiration Date:</strong> ${item.Expirationdate}
`;
element.appendChild(info);

widgetContainer.appendChild(element);

});
};

function selectedPart(part) {
selectedItem = part;

const selectedItemText = JSON.stringify(selectedItem);
fireEvent(“itemSelected”, { selectedItem: selectedItemText });

}

getValue(“DataArray”, handlePropChange);

2

I already figured out

This is my new code:

const widgetContainer = document.getElementById(“widgetContainer”);
let selectedItem = null;

// Set the initial value of the prop
let dataArray = ;

// Function to handle changes in the prop
const handlePropChange = (newValue) => {
// Transform the received array into the appropriate format
dataArray = newValue.map((item) => {
const [
Location,
PartNumber,
LotSerial,
Reference,
QOH,
Site,
Expirationdate,
] = item.split(“,”);
return {
Location,
partNumber: PartNumber,
LotSerial,
Reference,
QOH,
Site,
Expirationdate,
};
});
updateUI();
};

// Function to update the UI based on the new data
const updateUI = () => {
// Clear the container to avoid duplicates
widgetContainer.innerHTML = “”;

// Iterate over the data to create the elements
dataArray.forEach((item, index) => {
const element = document.createElement(“div”);
element.className = “item”;

// Button to select the item
const button = document.createElement("button");
button.innerText = `Select`;
button.className = "button";
button.onclick = () => {
  selectedPart(item);
};
element.appendChild(button);

// Item information
const info = document.createElement("div");
info.innerHTML = `
    <strong>Part Number:</strong> ${item.partNumber}<br>
    <strong>Location:</strong> ${item.Location}<br>
    <strong>Quantity on Hand:</strong> ${item.QOH}<br>
    <strong>Lot Serial:</strong> ${item.LotSerial}<br>
    <strong>Reference:</strong> ${item.Reference}<br>
    <strong>Expiration Date:</strong> ${item.Expirationdate}
`;
element.appendChild(info);

widgetContainer.appendChild(element);

});
};

// Function to handle the selection of a part
function selectedPart(part) {
selectedItem = part;

// Assign only the values to the selectedItemText variable
const selectedItemText = ${part.Location}, ${part.partNumber}, ${part.LotSerial}, ${part.Reference}, ${part.QOH}, ${part.Site}, ${part.Expirationdate};

// Fire a custom event to notify the selection, passing the values as text
fireEvent(“itemSelected”, selectedItemText);
}

// Call the getValue function to listen for changes in the prop
getValue(“DataArray”, handlePropChange); // Replace “yourPropName” with the name of your Prop in Tulip

3

Hi @emendoza - I’m glad you figured it this out so quickly!

Do you mind explaining what worked in your new code to fix the issue so others can learn in case they have a similar question / challenge?

4

@Beth sure!

I think there were two errors.

The first one is that I declared the fire event function.

image

But it was not necessary, so I removed those lines of code

The second one was because I declared a string property and my output was an object in JSON format, so I converted the object into a string in my code.

image
image719×96 3.64 KB

I think those were the issues!

Thanks

1 Like
5

Awesome, thanks for sharing Edgar :slight_smile: