A CrossUI Excel-like Formula Tutorial to show how to do simple automatic calculation in CrossUI. [CrossUI Front-End Builder enables developers to Create Responsive HTML5 Apps Without Coding. Prototype, develop and package the exactly same code into Web Apps, Native Desktop Apps, as well as Mobile Apps. Not only prototypes but live front-end that interacts with back-end web services, with no coding]

1. Excel-like Formula
CrossUI Tutorial - Intermediate
How to do simple automatic calculation in CrossUI

2. Online demo
http://www.crossui.com/demo/Tutorial-Intermediate-Formula
How to do simple automatic calculation in CrossUIObjectives
Result page

3. Excel-like formula engine
There’s a built-in Excel-like formula engine in the TreeGrid widget, CrossUI also
implements this mechanism for Form Controls
• Property “excelCellId” is used to simulates a CONTROL into a CELL
• Property “excelCellFormula” is used to set a formula for the CELL
 Support following functions only: CONCATENATE, ABS, ISNUMBER, NOW, TODAY, IF, AND, OR, NOT,
SUM, AVERAGE, COUNT, MIN, MAX, ROUND, FIXED, CHOOSE
 To implement complex computational function , you can use custom-function
excelCellFormula : "=FIXED(SUM(1:1,AVERAGE(A:A,B3))+ROUND(B1)*C1, 2)"
excelCellFormula : "=function(){ /*any javascript code*/ return A1*B2}"
excelCellFormula : function(){/*any javascript code*/ return A1*B2}

4. 1.Create a new project
① Click here to add a blank
project
② Modify the project name
③ Click “OK” to create it

5. 2. Add some inputs for simulating “A1:B3”
① Drag 6 Spinners
into the canvas
② Follow the next 6 pages to set
properties for each control

6. Set excelCellId to “A1”
<1st Spinner>
Properties setting

7. Set excelCellId to “A2”
<2nd Spinner>
Properties setting

8. Set excelCellId to “A3”
<3rd Spinner>
Properties setting

9. Set excelCellId to “B1”
<4th Spinner>
Properties setting

10. Set excelCellId to “B2”
<5th Spinner>
Properties setting

11. Set excelCellId to “B3”
<6th Spinner>
Properties setting

12. 3. Add two inputs for simulating “C1:C2”
① Drag 2 Numbers
into the canvas
② Follow the next 2 pages to set
properties for each control

13. Set excelCellId to “C1”
Set excelCellFormula to “=A1+A2”
<1th Number>
Properties setting

14. Set excelCellId to “C2”
Set excelCellFormula to
“=function(){ return A1+A2}”
<2th Number>
Properties setting
This "function" is the same as the formula “=A1+A2”,
but "function" can implement more complex calculation

15. 3. Add 3 inputs for showing Formula results only
① Drag 3 Numbers
into the canvas
② Follow the next 3 pages to set
properties for each control

16. Set excelCellFormula to
“=FIXED(SUM(1:1,AVERAGE(A:A,B3))+ROUND(B1)*C1+MA
X(A1:B2, B3)+MIN(10, B3)/1000, 2)”
<1th Number>
Properties setting

17. Set excelCellFormula to
“=CHOOSE(A1,10,20,30,40,50,60,70)”
<1th Number>
Properties setting

18. Set excelCellFormula to
“=IF(AND(A1>=2, A2<4, OR(B1=5, B2<>10)),A1,C2)”
<1th Number>
Properties setting

19. 4. Add a Panel as container
② Set properties
① Drag Panel nto
the canvas

20. 4. Add a Grid into the panel
① Drag TreeGrid
into the panel
② Follow the next 3 pages to set
properties for it

21. Set excelCellId to “D1”
Set gridValueFormula to “=SUM(C:C)”
Properties setting
“gridValueFormula” is a formula for calculating the grid’s
value from inner cell values

22. Click here to set grid’s
header/columns
All settings for the grid’s
header
Set the formula for
‘sum’ column
“=A_*B_” is a formula template, for 1st row,
the formula will be “=A1*B1”

23. If you like, add some
rows into the grid

24. 5. Add a Label for showing the grid value
Drag Label into the
canvas
Set excelCellFormula to
“=CONCATENATE("Total: ", D1)”
Properties setting

25. 6.Save and debug it
Click here to save the project
And, click here to show the runtime

26. 7. The runtime

27. Thanks
Download the source code
CrossUI Tutorial - Intermediate
Excel-like Formula
http://www.crossui.com/Download/Tutorial-Intermediate-Formula.zip
Online demo
http://www.crossui.com/demo/Tutorial-Intermediate-Formula
http://www.linkedin.com/in/crossui