Example of Creating the FormulaEditor 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, resources.ru.js.

2. Add a scenario creating the FormulaEditor component:

PP.ImagePath = "../../../../../build/img/"; // Path to images folder
PP.ScriptPath = "../../../../../build/"; // Path to scenarios folder
PP.CSSPath = "../../../../../build/"; // Path to styles folder
// Set a path to the root folder containing resources files
PP.resourceManager.setRootResourcesFolder("../../../../../resources/");
// Set languages settings for resources
PP.setCurrentCulture(PP.Cultures.ru);
function createFormulaEditor() {
    // Create a formula editor
    formulaEditor = new PP.Ufe.Ui.FormulaEditor({
        // Set parent element
        ParentNode: document.getElementById("formulaEditor"),
        // Initial categories of formulas that are set on editor initialization
        InitialFunctionCategories: [{
            Key: "key0",
            Text: "Category"
        }],
        // Initial terms that are set on initialization
        InitialTerms: ["2+2=4"],
        // Set left column contents
        LeftColumnContent: "Left column contents",
        // Set minimum width of central column
        MinCenterColumnWidth: 50,
        // Set contents of parameter calculation panel
        CalculationPanelContent: " Contents of parameter calculation panel",
        // Set template for describing operators and functions
        DescriptionTemplate: '<p style="font-weight: bold;">View: {entity}</p><p>Description: {description}</p>'
    });
    // Set a new name for filtering button
    formulaEditor.getFilterMenuButton().setContent("Filter");
    // Set focus on the term editor
    formulaEditor.setFocusTermEdit();
}

4. In the <body> tag as the value of the onLoad attribute, specify name of the createFormulaEditor() function.

After executing the example a formula editor is added to the page: