Passing Data from HTML Control to Another Control

I have a question about passing the result of HTML/Javascript code in an HTML Control to another control.

I built a boolean search builder using HTML/Javascript

Ultimately the code uses Javascript to build the string final_input. I need to pass that value to another control in my app which processes the query.

image

The HTML/Javascript code works well in an HTML Control; the HTML/Javascript code is under “Data” in the binding section. But I do not know how to set the final result of the HTML control so that I can bind that to an app builder variable.

I realize that if used the Custom Javascript or Custom Formula options for binding then those would set the overall result of he HTML control, but if I use those options I can only use Javascript and not the HTML code which I need for my query builder.

How do I use the HTML/Javascript code within my app and in turn pass its calculated string on to another control?

Hi,

As far as I understood from the explanation, you are trying to evaluate a JS code in an HTML control using the Custom JavaScript option in its Data section. That is, the custom javascript will evaluate the code & then bind the respective result in this HTML control.

HTML control is a display only control used to display some content in HTML format. You can know more about HTML control here.

As per the further explanation, it looks like you want to combine some HTML content & a JavaScipt code’s result. I would recommend you to either:

  1. Separate HTML content and JavaScript code and evaluate the JavaScript code on another control (say Text Input, Numeric, or Tablegrid, according to the JavaScript output’s data format). Then you can take reference of this control as desired.

  2. Evaluate the JavaScript code in one control (say text input) first and then use the reference of that control (say text input) in your HTML control’s data/content as required.

  3. Or alternatively, you can create 1 JavaScript code that will result in the HTML content having the output of the other JavaScript code you were trying to combine this HTML with.

To bind a control’s value (or any other action task’s output) in an app builder level variable, first, create a variable and then use an on-screen action named Set Variable in an action flow.
Use the “Use Keywords” option to get the list of app controls & action tasks and then select the desired control (say HTML or Text Input) and finally save the Set Variable task…

I hope this will help. For further guidance, feel free to share a sample HTML or JavaScript code output you want to show in a control/ variable. :slightly_smiling_face:

Thanks for the help @prerna

I have put the combined HTML/Javasript in the Data (Beta) section of binding like this:

This is the code:

<html>

    <style>
        button, input[type="submit"] {
            color:white;
            font-weight: 800;
            border: 0px;
        }
        input[type="submit"] {
            background-color:rgb(32, 85, 138)
        }
        button {
            background-color: rgb(231, 90, 99);
        }
        select {
            background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
            background-repeat: no-repeat;
            background-position-x: 100%;
            background-position-y: 50%;
            appearance: none;
        }
        select, input, button {
            padding: 5px 10px;
        }
        #container-wrapper {
            display: flex;
            width: 100%;
            justify-content: center;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        #container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        #query-box-container {
            display: flex;
            justify-content: space-between;
            width: 100%;
            align-items: end;
        }
        #operator-container {
            display: flex;
            width: 100%;
        }
        #operator-selector {
            padding-right:20px;
        }
        #query-box {
            width:80%;
            height: 100px;
        }
        #clear-button {
            height:30%;
            min-height:30px;
        }
        #fields-container {
            display:flex;
            align-items: center;
            margin-bottom: 40px;
            gap:10px;
        }
        #search-container {
            width:100%;
            display: flex;
        }
        #date-extension {
            display: flex;
        }

        /* CLASSES */
        .description-text {
            display: flex;
            width: 100%;
            justify-content: start;
            padding-bottom: 10px;
        }

        /* CONVENIENCE */
        .hidden {
            display:none !important;
        }

        /* RESPONSIVE */
        @media screen and (max-width:742px) {
            select, input {
                width: 100%;
            }
            #container {
                width:100%;
                padding-left:10%;
                padding-right:10%;
            }
            #fields-container {
                flex-direction: column;
                width:100%;
            }
            #operator-container {
                width:100%;
                gap:10px;
            }
            #search-container {
                flex-direction: row;
            }
            #date-extension {
                flex-direction: row;
                width: 100%;
                align-items: center;
            }
        }
    </style>

    <div id="container-wrapper">
        <div id="container">

            <div class="description-text">
                Add terms to the query box
            </div>
            
            <form id="fields-container" action="javascript:void(0);">
                <select id="fields" name="fields">
                    <option value="Affiliation">Affiliation</option>
                    <option value="All Fields" selected="selected">All Fields</option>
                    <option value="Author">Author</option>
                    <option value="Author - Corporate">Author - Corporate</option>
                    <option value="Author - First">Author - First</option>
                    <option value="Author - Identifier">Author - Identifier</option>
                    <option value="Author - Last">Author - Last</option>
                    <option value="Book">Book</option>
                    <option value="Conflict of Interest Statements">Conflict of Interest Statements</option>
                    <option value="Date - Completion">Date - Completion</option>
                    <option value="Date - Create">Date - Create</option>
                    <option value="Date - Entry">Date - Entry</option>
                    <option value="Date - MeSH">Date - MeSH</option>
                    <option value="Date - Modification">Date - Modification</option>
                    <option value="Date - Publication">Date - Publication</option>
                    <option value="EC/RN Number">EC/RN Number</option>
                    <option value="Editor">Editor</option>
                    <option value="Filter">Filter</option>
                    <option value="Grant Number">Grant Number</option>
                    <option value="ISBN">ISBN</option>
                    <option value="Investigator">Investigator</option>
                    <option value="Issue">Issue</option>
                    <option value="Journal">Journal</option>
                    <option value="Language">Language</option>
                    <option value="Location ID">Location ID</option>
                    <option value="MeSH Major Topic">MeSH Major Topic</option>
                    <option value="MeSH Subheading">MeSH Subheading</option>
                    <option value="MeSH Terms">MeSH Terms</option>
                    <option value="Other Term">Other Term</option>
                    <option value="Pagination">Pagination</option>
                    <option value="Pharmacological Action">Pharmacological Action</option>
                    <option value="Publication Type">Publication Type</option>
                    <option value="Publisher">Publisher</option>
                    <option value="Secondary Source ID">Secondary Source ID</option>
                    <option value="Subject - Personal Name">Subject - Personal Name</option>
                    <option value="Supplementary Concept">Supplementary Concept</option>
                    <option value="Text Word">Text Word</option>
                    <option value="Title">Title</option>
                    <option value="Title/Abstract">Title/Abstract</option>
                    <option value="Transliterated Title">Transliterated Title</option>
                    <option value="Volume">Volume</option>
                </select>
                <div id="search-container">
                    <input type="text" id="search-term" name="search-term" placeholder="Enter a search term">
                    <div id="date-extension" class="hidden">
                        &nbsp;to&nbsp;
                        <input type="text" id="ending-date" name="ending-date" placeholder="Present">
                    </div>
                </div>
                
                <div id="operator-container">
                    <input type="submit" value="ADD" id="operator-button">
                    <select id="operator-selector" name="operator-selector" disabled>
                        <option value="AND">Add with AND</option>
                        <option value="OR">Add with OR</option>
                        <option value="NOT">Add with NOT</option>
                    </select>
                </form>
                </div>

            <div class="description-text">
                Query Box
            </div>
            
            <div id="query-box-container">
                <textarea readonly id="query-box" name="query-box" placeholder="The final query will be displayed here"></textarea>
                <button id="clear-button">Clear</button>
            </div>

        </div>
    </div>

        
    

    <script>
        // DOM Elements
        let fields = document.getElementById("fields")
        let search_term = document.getElementById("search-term")
        let operator_button = document.getElementById("operator-button")
        let operator_selector = document.getElementById("operator-selector")
        let query_box = document.getElementById("query-box")
        let clear_button = document.getElementById("clear-button")
        let date_extension = document.getElementById("date-extension")
        let ending_date = document.getElementById("ending-date")

        // Helper vars
        let prev_selected_field = ""


        // Change button text
        operator_selector.addEventListener("change", function() {
            operator_button.value = operator_selector.value
        })

        // Add to query box
        operator_button.addEventListener("click", function() {
            if (fieldParser() == false) {
                return
            }
            let prepared_query = prepareQuery()
            let final_query = getFinalQuery(prepared_query)
            addToQueryBox(final_query)

            // Cleanup
            search_term.value = ""
            ending_date.value = ""
            operator_selector.disabled = false
            if (operator_button.value == "ADD") {
                operator_button.value = operator_selector.value
            }
        })

        function prepareQuery() {
            let processed_query = ""
            if (fields.value == "All Fields") {
                processed_query = search_term.value
            }
            else if (fields.value.startsWith("Date")) {
                const initial_date = search_term.value
                let final_date = ending_date.value

                if (final_date == "Present" || final_date == "") {
                    final_date = "3000"
                }

                processed_query = "(\"" + initial_date + "\"[" + fields.value + "] : \"" + final_date + "\"[" + fields.value + "])"
            }
            else {
                processed_query = search_term.value + "[" + fields.value + "]"
            }
            return processed_query
        }

        function getFinalQuery(prepared_query) {
            if (query_box.value == "") {
                return prepared_query
            }

            let old_query = "(" + query_box.value + ")"
            let final_query = old_query + " " + operator_selector.value + " " + "(" + prepared_query + ")"
            return final_query
        }

        function addToQueryBox(final_input) {
            query_box.value = final_input
        }

        // Field Parser
        function fieldParser() {
            // Check if empty
            if (search_term.value == null || search_term.value == "" || search_term.value == " ") {
                alert("Search term field can't be blank.")
                return false
            }
            else {
                return true
            }
        }

        // Clear button
        clear_button.addEventListener("click", function() {
            query_box.value = ""
            operator_selector.disabled = true
            operator_button.value = "ADD"
        })

        //Fields 
        fields.addEventListener("change", function() {
            if (fields.value.startsWith("Date")) {
                date_extension.classList.remove("hidden")
                search_term.placeholder = "YYYY/MM/DD"
                if (!prev_selected_field.startsWith("Date")) {
                    search_term.value = ""
                    ending_date.value = ""
                }
                
            }
            else {
                date_extension.classList.add("hidden")
                search_term.placeholder = "Enter a search term"
                if (prev_selected_field.startsWith("Date")) {
                    search_term.value = ""
                }
            }
            prev_selected_field = fields.value
        })
    </script>
</html>

It works as an HTML control to build a query:

https://web.dronahq.io/Aab3gtZvAnv3ZjoxufAoPq2bcMhkPXS2NHRi93yQTJ6h7

The question is… You say an HTML control is a “display only” control. Clearly it can do more than that as the Javascript logic is working just as one would expect on a web page with combined HTML and Javascript content.

The problem is … How do I take the final output (shown here in the QueryBox) and pass that string on to another control?

Hi @rkaplan

HTML is non-input control which is like a container that renders the respective HTML code/content within it. You can use javascript code or any other way of calling data within the control, however, the javascript & HTML code will work within this HTML control only. The basic idea of HTML is to provide an option for creating your own advanced UI for display purposes only. This will not return any interactive response/output.

Also, the UI you are trying to achieve via HTML here can easily be developed by using other Studio input controls like Dropdown, Text Input, Select Bar, Text Area & Button, etc. Instead of using HTML control, I would recommend using the same javascript logic in controls like Text Area to show this Query Box output in a similar fashion. You will also be able to use the Text Area’s output in other controls or variables as required.

1 Like