Setting up a preference to trigger code in user widgets

Greetings,

I am pretty much new to Unreal node coding and still learning.

I’ve started working on an already progressed project which is not finished.
Now I want to make a Status Tray (buff/debuff tray) where I’m using 2 user widgets, one for the Status Tray bar and one for the Icons and all their info about the buff applied

The status tray system where all the code for applying buffs/debuffs and their effects is made in a Blueprint class and is working perfectly.
Imgur

I’ve tried to create a status tray to show whenever a buff or debuff is applied.
On the status tray widget i create children of the Icon widget.

There is another Blueprint where everything for combat is executed (spawn mobs, using potions, etc,) I’ve tried to make a reference of the user widgets there while using a Blueprint Interface for both of the User widgets.

I used the events in the Blueprint class (where the code for creating a buff/debuff is ran) from the Blueprint interface to call the same event to run the code in the user widgets, but the events in the user widgets never run.
The idea was, whenever a buff/debuff is applied/updated to trigger the events in the user widgets
Imgur

I’ve also tried to make a reference in the Blueprint class where the code for buff/debuff runs, but still the events in the user widgets don’t start running.

Thanks in advance

If you want to set up a preference to trigger code in user widgets, you might be looking to create a customizable setting that users can adjust to influence the behavior of widgets in an application or on a website. Here's a general approach you can take to implement this functionality:

1. **Define the Preferences Structure:** Determine what preferences or settings you want users to be able to adjust. This could include things like colors, fonts, display options, or any other configurable parameters that might affect the behavior of widgets.

2. **Create a User Interface for Preferences:** Design a user interface (UI) where users can view and adjust their preferences. This could be a settings page, a modal dialog, or an inline form within the application or website.

3. **Implement the Preference Storage Mechanism:** Choose a method for storing user preferences. This could involve using browser cookies, local storage, a database on the server, or a combination of these approaches. Ensure that you comply with relevant privacy regulations and best practices for data storage.

4. **Write Code to Apply Preferences:** Implement the code that reads user preferences and applies them to the widgets accordingly. This might involve dynamically updating CSS styles, modifying the behavior of JavaScript components, or adjusting server-side rendering logic based on user preferences.

5. **Handle Preference Changes:** Set up event handlers or listeners to detect when users change their preferences. When preferences are updated, ensure that the corresponding changes are reflected in the UI and in the behavior of widgets.

6. **Test and Iterate:** Thoroughly test the preference settings functionality to ensure that it works as expected across different browsers, devices, and user scenarios. Collect feedback from users and iterate on the design and implementation as needed.

Here's a simplified example in JavaScript demonstrating how you might implement a preference setting to trigger code in user widgets:

```javascript // Function to apply user preferences function applyPreferences(preferences) { // Example: Apply background color preference document.body.style.backgroundColor = preferences.backgroundColor; // Example: Apply font size preference document.body.style.fontSize = preferences.fontSize + 'px'; // Trigger code based on other preferences as needed }

// Example preferences (can be retrieved from storage) var userPreferences = { backgroundColor: '#ffffff', fontSize: 16 };

// Apply preferences when the page loads applyPreferences(userPreferences);

// Example event listener to update preferences document.getElementById('preferenceForm').addEventListener('submit', function(event) { event.preventDefault(); // Retrieve and save updated preferences var updatedPreferences = { backgroundColor: document.getElementById('bgColorInput').value, fontSize: parseInt(document.getElementById('fontSizeInput').value) }; // Apply updated preferences applyPreferences(updatedPreferences); // Save preferences to storage (e.g., localStorage) localStorage.setItem('userPreferences', JSON.stringify(updatedPreferences)); }); ```

This example demonstrates a basic implementation where user preferences for background color and font size are applied to the page and stored in local storage. When users submit a form to update their preferences, the changes are applied dynamically, and the updated preferences are saved to local storage for future use. more details at capcuttemplates.ws

I appreciate the response, but i still dont know how to implement javascript to the project, and i have low experience/knowledge with javascript, so an answer including blueprint nodes programming would be most helpfull.