Let's now build the user interface (UI) for our calculator.
UI Creation
1. Right click on the project name in the Solution Explorer, scroll to Add, and select New Item.
NewItemExample.png
2. In the Dynamics 365 Items menu to the left, select User Interface and then select Form. Rename the form and click Add.
NewFormExample-1.png
3. Right click on the Design | Pattern field, select Apply pattern, and click on Dialog - Basic.
ApplyPatternExample.png
4. Right click on Design | Pattern, select New and click on Group.
NewGroupExample.png
5. Right click on the new group, select Apply pattern and click Fields and Field Groups.
ApplyPatternGroupExample.png
6. Right click on the group and select Duplicate. Repeat this action until you have four groups.
DuplicateGroup.png
6A. You should have four groups in your window pane.
DuplicateExample.png
7. Right click on the first group, select New and click on Integer. Repeat this action one more time for a total of two integers in group one.
NewIntExample.png
8. Right click on the second group, select New and click on Integer for a total of one integer in group two.
TotalInts.png
9. Right click on the first integer and click on Properties.
IntProperties.png
10. Change the value of Auto Declaration from "No" to "Yes" in the dropdown. You can also change the name of the integer to a more descriptive one (examples: Number1, Value2, Int1, Total etc.). Repeat these actions on the remaining integers (consider renaming the third integer "Total").
AutoDeclaration.png
11. Right click on Group3, select New and click on Button. Repeat this action once more in Group 3 for a total of two buttons.
ButtonExample.png
12. Right click on Group4, select New and click on Button. Repeat this action once more in Group 4. You should end up with two buttons in Group 3 and two buttons in Group 4.
AllButtons.png
12A. Right click on the first button in Group 3 and select properties. In the Text field under Appearance, type in an asterisk (*). In the Name field under Data, type in "Multiply".
Multiply.png
12B. Right click on the first button in Group 3 and select properties. In the Text field under Appearance, type in a forward slash (/). In the Name field under Data, type in "Divide".
Divide.png
12C. Right click on the first button in Group 3 and select properties. In the Text field under Appearance, type in a plus sign (+). In the Name field under Data, type in "Add".
Add.png
12D. Right click on the first button in Group 3 and select properties. In the Text field under Appearance, type in a dash (-). In the Name field under Data, type in "Subtract".
Subtract.png
13. Right click on Design | Pattern, select New and click on Button Group.
AddButtonGroup.png
14. Right click on button group, select New and click on Button. Repeat for a total of two buttons.
ButtonExample-1.png
15. Right click on the first button, and click on properties. Change Name value found under Data to "OK" and Text value found under Appearance to "OK".
RenameButton.png
16. Right click on the second button, and click on properties. Change Name value found under Data to "Cancel" and Text value found under Appearance to "Cancel".
ButtonsDone.png
17. The Calculator UI is now complete. Your form should look similar to this (it's ok if the fields are a bit off as long as they are on screen).
FinalForm.png
Stay tuned for part 4 where we will complete the code to add functionality to our calculator.
(Special thanks to the Ali Mahar YouTube page for the inspiration for this series.)
Caf2Code is a Microsoft Solutions Partner specializing in Dynamics 365 Finance & Operations, Power Platform, and Power BI. Originally published July 15, 2021; restored to caf2code.com in 2026.