Example of Creating the TermEdit Component

To execute the example, create an HTML page and perform the following operations:

1. Add links to the styles files: PP.css, PP.Metabase.css, PP.Ufe.css.

Also, add links to the scenarios files: PP.js, PP.Metabase.js, PP.Ufe.js.

2. In the <body> tag add two <div> elements with the TE (formula editor container) and get_terms_btn (button container) identifiers, the <textArea> element (text box that shows result of executing the get_terms function):

<!-- Formula editor -->
<div id="TE">
<br/> <!-- Text area --> <textarea id="res" cols="30" rows="9"></textarea> <br/> <!-- Button --> <div id="get_terms_btn"></div>

3. Then add a script that creates the TermEdit component:

// Create the TermEdit component
var termEdit = new PP.Ufe.Ui.TermEdit({
    ParentNode: "TE",
    Width: 200,
    Height: 100,
    // Terms list
    Terms: [{  // Term text
        Content: "(",
          // Term formula
         Formula: "(",
    }, { 
        Content: "Year",
         Formula: "Year",
    }, { 
        Content: "+",
         Formula: "+",
    }, { 
        Content: "Day",
         Formula: "Day",
    }, { 
        Content: ")",
         Formula: ")",
    }, { 
        Content: "*",
         Formula: "*",
    }, { 
        Content: "Dimension",
         Formula: "Dimension",
    }]
});
// Create a function that places terms in the text area
function get_terms() {
    var terms = termEdit.getTerms(); //returns the terms list
    var resArea = document.getElementById("res"); //text area
    resArea.value = "";
    for (var i = 0; i < terms.length; i++)  {
        // Text area value
        resArea.value += terms[i] + "\n"; //
    }
}
// Create a button clicking which performs the get_terms function
var get_terms_btn = new PP.Ui.Button({
    Content: "Get terms",
    ParentNode: document.getElementById("get_terms_btn"),
    Click: get_terms
});

After executing the example the HTML page will contain the TermEdit component that looks as follows:

A text area located below is filled with the terms list after clicking the Get Terms button:

See also:

TermEdit