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:
See also: