I hope you are doing well. Iāve been working on a project recently and encountered a challenge that I need your help with. I have a reusable element in my app that I want to use within a repeating group, and I need to pass data from this reusable element to the page it resides in.
Iāve spent a considerable amount of time researching and experimenting with various solutions. I tried using the "Satellite " plugin, but unfortunately, it didnāt work as expected with repeating groups, and I encountered numerous bugs. Iāve also tested several other scenarios, but each one seems to have issues when dealing with repeating groups.
To give you a better idea, here are some of the challenges and scenarios I encountered:
Satellite Plugin: I tried using the "Satellite " plugin, but it didnāt work well with repeating groups, and I faced issues with data synchronization and handling events.
Passing Data: I attempted to pass data using custom states, but this resulted in inconsistency and difficulties when updating the elements within the repeating group.
Workarounds: I even tried various workarounds like using URL parameters and using unique IDs for each element, but these approaches proved to be error-prone and inefficient.
Iām reaching out to you all because I believe there must be an optimal solution or best practice to handle this situation efficiently. Iām looking for suggestions, ideas, or any insights on how to pass data from a reusable element within a repeating group effectively.
If any of you have faced similar challenges or have experience in dealing with this kind of scenario, Iād greatly appreciate your guidance. I want to find the best approach to handle this problem in the most time-efficient manner.
Thank you all for your time and expertise. Iām eager to hear your thoughts and recommendations.
Personally, I think the simplest way to do this type of thing is just with a JavaScript to Bubble element. Itās how I do it.
Put the JavaScript to Bubble element on the page, set it to publish a value of the relevant type, then in the RE just use a run JavaScript action to call the element as a function and pass the relevant data into it.
Thank you @adamhholmes for your suggestion! I appreciate your insight on using JavaScript to Bubble elements. Iāll definitely give it a try and implement your approach. Grateful for your help!
I am encountering this issue too and it seems like your solution may work. I donāt know too much about javascript - any chance you have an example you could share so I can see how this works?
Hereās a simple example of passing a value from a nested Reusable Element to a JavaScript To Bubble element on the main page, avoiding the need to use custom states and only when conditions through multiple layers of nesting, or an additional plugins.
Just have the JS to Bubble element on the page, and in the nested RE run a Javascript action to call the function and pass the relevant data to it.
];
let rgValues = [];
rgItems.forEach(item => {
let inputID = `rgInput${item}`;
let inputElement = document.getElementById(inputID);
let itemObject = { itemNumber: item, itemValue: inputElement.value };
rgValues.push(itemObject);
});
console.log(rgValues);
let rgJSON = JSON.stringify(rgValues, null, 2);
bubble_fn_rgJSON(rgJSON);
When using it I see that all values expressed in the JSON are enclosed with quotation marks indicating a text value.
Except the Number for the itemNumber key.
I do not know much of anything about javascript, but when I try to figure out how to make it so that the quotation marks appear only for a text value, while leaving numerical values without quotation marks, I can not find anything in the javascript that makes the quotation marks enclose the values.
I tried to remove the āā that enclose the rgInput${item} portion, but that causes the javascript to not run.
Is there a way to alter the javascript so that the quotation marks do not appear?
Iāve been successful in getting this to work for my use case which takes values from multiple input elements within the RG, but for the JSON formatting to use quotation marks only around text values, I can not find a way to make that change.
Yes, I was asking about the values associated with the keys. The javascript makes it such that all values are in double quotes, whether they are for a number or a word. I was curious if you knew how to modify the code so that not all values are in double quotes, so if I have a Key of āWordā and a key of āNumberā the values for āWordā key pairs would be in double quotes but for the values of key pairs for āNumberā keys they would not be in double quotes.
Right now using the code, I get all values in double quotes, but for something like āweightā value I would need no double quotes as it is a number, but for āweight_optionā I would need double quotes as it is a word.
The value of an input element is always a string, regardless of the ātypeā of the input. (Bubble automatically converts the value to the type defined in the input settings, but the actual value of the html element will remain a string).
So youāll need to convert the relevant values to numbers in your code.
Unlike standard HTML inputs (which can have a ātypeā - even though they always output strings), Bubble input elements are always of the input type Text - which makes it hard to identify which values should be numbers or texts (as you canāt simply check the inputās ātypeā).
So you might have to add a class to your input elements (depending on whether they are text or number), and then in your code check for the presence of each class to determine whether to cover the input value to a number.
