How to have multiple condition builders on the same UI page?

[spease]

Creating a UI page and with one condition builder it works fine:

<g:ui_element table="u_custom_table" field="u_table" id="2959b3971b0ea1101933415dee4bcb0e"></g:ui_element>
<g:ui_element table="u_custom_table" field="u_conditions" id="2959b3971b0ea1101933415dee4bcb0e"></g:ui_element>
<script>
    document.getElementById("element.u_custom_table.u_table").hide()
</script>

Using the sys_id of the actual record we're wanting to modify for the g:ui_element's id means that we also get the conditions pre-filled, which is also great, and then I can just getFilter('u_custom-table.u_conditions') and get the encoded query.

The problem comes in with the fact that I want multiple condition builders on the UI page- indeed, that's the point of the UI page. They all point to the same tables and fields, but different records in the table. However, the ui_element macro seems to break in that case, presumably because the ID is based solely off the table.fieldname. Looking at the ui_element macro itself shows that all the heavy lifting is being done by a mysterious <g:element> jelly extension that seems to break if you feed it any extra or different parameters and for which I can find no documentation for.

Any ideas?

[Amit Gujarathi]

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>

[spease]

Re-implementing the entire condition builder functionality from scratch is somewhat of an unrealistic path for moving forward- there are a lot of parts in that, especially once your starting going into it's ability to handle any dictionary type and the dotwalking functionality.

The built-in method for displaying a condition builder works fine, the issue is just having more than one on screen at a time.