CREATE FORM CONTROL FOR ORDER APPLICATION

STEP 1: CREATE ITEM LIST IN SHAREPOINT

1. Sharepoint → PcWord → New → List

2. Create a list → Blank list

3. Name the list as Item→ Click Create button

1
4. Design Item List as following fields name and data type:

Field Name Data Type

ItemName Single line of Text
ItemPrice Currency
ItemImage Hyperlink

5. Then, fill in the following record in Item list:

ItemName ItemPrice ItemImage

https://www.printciouscdn.com/Upload/BulkOrderSubCategory/1-t-
TShirt RM 25.00
shirts-photo1-20220913103322.jpg?v=016
https://s7d2.scene7.com/is/image/VansEU/VN0A3WMAVNE-
Shoes RM75.00 HERO?wid=800&hei=800&fmt=jpg&qlt=85,1&op_sharpen=0&resMo
de=sharp2&op_usm=1,1,1,0
https://u7q2x7c9.stackpathcdn.com/photos/24/36/365132_308_XXL
Pants RM39.90
.webp
https://1.bp.blogspot.com/-
LczotthbwbU/XJ5MPfSUSBI/AAAAAAAALjI/6PZ2Ll0Bbu4NXgrFjbGQm
Tudung RM15.50
EHtGSjvP9raQCLcBGAs/s320/WhatsApp%2BImage%2B2019-03-
30%2Bat%2B00.45.43.jpeg

2
STEP 2: CREATE BUYING LIST IN SHAREPOINT

6. Sharepoint → PcWord → New → List

7. Create a list → Blank list

8. Name the list as Buying → Click Create button

3
9. Design Buying List as following fields name and data type:

Field Name Data Type

CustomerID Number
CustmerName Single line of Text
PhoneNo Single line of Text
Email Single line of Text
Address Single line of Text
ItemName Single line of Text
ItemPrice Currency
Quantity Number
TotalPrice Currency

4
STEP 3: CREATE USER INTERFACE FOR ORDER FORM APPLICATION

1. Open PowerApp → Select Apps → Choose PCWorld App → Edit

2. Insert New Screen → Select Blank Layout

3. Rename Screen1 to OrderScreen.

5
4. Insert Text Label → Rename as LblOrder at Tree View. Then, format the text label as below:

Text = “Order Form”

Font = Open San, Font Size = 45, Bold

Alignment = Center

Fill Color = Red, Font Color = White

5. After that, start design ItemGallery as below. Insert → Layout → Vertical Gallery

6. Then, Insert Data Source. Connector → SharePoint → PlanetGadget → Item → Connect button

6
7. Don’t forget to rename Gallery1 to ItemGallery in Tree View.

8. Next, Insert ItemForm as shown below. Insert → Edit Form

9. Then, Insert Data Source. Connector → SharePoint → PlanetGadget → Item → Connect button

7
10. Edit ItemForm by remove ItemImage & Attachment fields. Then, place it at bottom left area of
screen.

11. After that, setting the ItemGallery action as Item. At formula bar type → ItemGallery.Selected

12. Continue design the Order form user interface by adding another edit form. This step we will
create Buying form using Data Source.

8
13. Then, Insert Data Source. Connector → SharePoint → PlanetGadget → Buying → Connect
button

14. Edit BuyingForm by remove Attachment fields. Then, place it at center of screen. Don’t forget to
set BuyingForm Default mode as New.

9
15. Next, unlock TitleDataCard. Rename Title to CustomerName. Repeat unlock DataCard for
ItemNameDataCard & ItemPriceDataCard.

16. After that, recognize DataCardValue for ItemName & ItemPrice in ItemForm:

ItemForm

Title @ ItemName DataCardValue5

ItemPrice DataCardValue6

10
17. Rename DataCardValue for ItemName in BuyingForm to DataCardValue5 (ItemForm) &
DataCardValue for ItemPrice in BuyingForm with DataCardValue6 (ItemForm).

*** This instruction will carry the value from of ItemName & ItemPrice in ItemForm to be display
in ItemName & ItemPrice in BuyingForm

*** Text input in BuyingForm will display selected ItemName & ItemPrice for current product in
ItemGallery.

18. Next, we need to change Text input for ItemName & ItemPrice to Text label.

*** If the values are in Text input, customer will edit the fields. This is wrong!!!! Logically, after
customer select product in ItemGallery, the ItemName & ItemPrice only display the values. That
why we need to add the Text label to be replaced the Text input.

19. This is how we add Text label for ItemName & ItemPrice. Follow the following steps:

a) Choose Card: ItemName → Insert Text Label → rename the text label as DataCardValue5
b) Choose Card: ItemPrice → Insert Text Label → rename the text label as DataCardValue6

11
20. After that, hide / invisible the Text Input ItemName & ItemPrice in BuyingForm.
Select Visible → Off at Property. Repeat steps for Card: ItemPrice.

21. Same instructions goes to ItemForm at bottom left of OrderScreen. Hide / invisible the Text input
of ItemName & ItemPrice. Visible → Off.

22. Next, set the Text input TotalPrice in BuyingForm as calculated Formula →

(TotalPrice = ItemPrice * Quantity)

Select Text input TotalPrice → make sure action as Default → and type the code:

Text (DataCardValue6*DatacardValue15)

ItemPrice Quantity

12
23. Then, insert Submit & Reset button.

At Submit button action → OnSelect → SubmitForm(BuyingForm);

→ Navigate(OrderSummaryScreen)

At Reset button action → OnSelect → ResetForm(BuyingForm)

24. Save OrderScreen.

13
STEP 4: CREATE USER INTERFACE FOR ORDER SUMMARY APPLICATION

1. Insert New Screen → Select Blank Layout

2. Rename Screen1 to OrderSummaryScreen.

14
3. Insert Text Label → Rename as LblOrderSummary at Tree View. Then, format the text label as
below:

Text = “Order Summary”

Font = Open San, Font Size = 45, Bold

Alignment = Center

Fill Color = Red, Font Color = White

4. After that, start design OrderSummaryScreen as below. Insert → Display form

5. Then, Insert Data Source. Connector → SharePoint → PlanetGadget → Buying → Connect

button

15
6. After that, at FormViewer1 action select item → BuyingForm.LastSubmit.

7. Then, insert Print button.

At Print button action → OnSelect → Print( );

16
8. At the LblOrderSummary, insert home icon and OnSelect → Navigate(OrderScreen)

9. Save your OrderSummaryScreen.

10. Now, your Order Form application already done. Click Preview or press F5 to see the output:

11. Fill in the Order Form as below and click submit button.

17
12. The OrderSummaryScreen also will display as below:

13. When, click Reset button, the BuyingForm will be clear all Text fields.

14. After submit the BuyingForm, the customer record will be save to Buying List in SharePoint.

18