HI @spease ,
I trust you are doing great.

To address this problem, I recommend the following approach:

1. Instead of using the <g:ui_element> macro, we can create custom UI components using HTML and JavaScript to achieve the desired functionality.

2. Start by defining the necessary HTML structure for your UI page, including the elements required for the condition builders. You can use div elements, input fields, and buttons to create a user-friendly interface.

3. Utilize JavaScript to handle the behavior of the condition builders. You can add event listeners to the input fields and buttons to capture user interactions and perform the desired actions.

4. When the user interacts with the condition builders and provides the necessary inputs, you can use JavaScript functions to process the data, build the encoded queries, and perform any additional operations required.

<!-- HTML structure for the UI page -->
<div>
  <label>Table:</label>
  <input type="text" id="tableInput">
  <br>
  <label>Conditions:</label>
  <input type="text" id="conditionsInput">
  <br>
  <button onclick="handleConditionBuilder()">Build Query</button>
</div>

<script>
  function handleConditionBuilder() {
    // Get the values entered by the user
    var table = document.getElementById("tableInput").value;
    var conditions = document.getElementById("conditionsInput").value;
    
    // Process the data, build the query, and perform necessary operations
    // Add your custom code here based on your requirements
    
    // Example: Display the built query
    var encodedQuery = getEncodedQuery(table, conditions);
    alert("Encoded Query: " + encodedQuery);
  }
  
  function getEncodedQuery(table, conditions) {
    // Add your code here to build the encoded query
    // You can utilize the 'table' and 'conditions' parameters
    
    // Example: Return a dummy encoded query
    return "encoded_query_here";
  }
</script>