Workshop Power Apps - Day 2

Day - 2
Xception Workshop
Power Apps
Workshop PowerApps
30/08/2022
1
Introduction to Power Apps
Overview
Power Apps Workshop
30 Aug 2020
2
1
Power Apps Workshop
Work Progress Tracker Application
Initialize Data Source

30 Aug 2020
3
Exercise - Initialize Data Source

1. Buka halaman Sharepoint sites Playground pada alamat :
https://gmfaeroasia365.sharepoint.com/teams/Playground
Power Apps Workshop
30 Aug 2020
4

2. Klik icon gear pada sisi kanan atas 3. Klik Site contents
Power Apps Workshop
30 Aug 2020
5

4. Jika berhasil maka akan tampil halaman seperti di bawah ini
Power Apps Workshop
30 Aug 2020
6

5. Kemudian klik new dan pilih List 6. Pilih Blank List
Power Apps Workshop
30 Aug 2020
7

7. Masukan nama dengan format 8. Jika berhasil akan tampil halaman seperti di bawah ini
{nopeg}_Work_Progress
Power Apps Workshop
30 Aug 2020
8

9. Tambahkan kolom seperti dibawah ini :
Nama Kolom Tipe Kolom

Power Apps Workshop
Title
Description Multiple lines of text
Category Choice
Progress Choice
Priority Choice
Start date Date and time
Due date Date and time
Assigned to Person
30 Aug 2020
9

Power Apps Workshop
30 Aug 2020
10

Power Apps Workshop
30 Aug 2020
11

10. Tambahkan 1-2 dummy data
Power Apps Workshop
30 Aug 2020
12

11. Jika berhasil akan tampil halaman seperti di bawah ini
Power Apps Workshop
30 Aug 2020
13
2
Power Apps Workshop
Create Top Menu &

Gallery
30 Aug 2020
14
Exercise– Create Top Menu & Gallery

1. Buka halaman Power Apps Home Page
https://make.powerapps.com/
Power Apps Workshop
2. Klik Blank App

30 Aug 2020
15

3. Pilih Blank canvas app 4. Masukan nama dengan format {{nopeg}} Work
Progress Tracker dan pilih format Tablet
Power Apps Workshop
30 Aug 2020
16

5. Jika berhasil akan tampil halaman seperti di bawah ini
Power Apps Workshop
30 Aug 2020
17

6. Selanjutnya kita tambahkan sharepoint list yang sebelumnya dibuat
pada aplikasi power apps
Power Apps Workshop
30 Aug 2020
18

7. Masukan alamat sharepoint https://gmfaeroasia365.sharepoint.com/teams dan pilih list yang
dibuat sebelumnya. Jika berhasil maka akan muncul data baru.
Power Apps Workshop
30 Aug 2020
19

7. Silahkan membuat bagian Top Menu seperti gambar dibawah ini.
Power Apps Workshop
30 Aug 2020
20

7. Silahkan membuat bagian Top Menu seperti gambar dibawah ini.
5 7
1
Power Apps Workshop
3 6
2
No Component Properties
1 Rectangle
2 Icon
3 Text label “Work Progress

Tracker”
4 Text label User().FullName
5 Text label User().Email
6 Image User().Image
30 Aug 2020
21

7. Masukan Blank Verical Gallery ke dala aplikasi
Power Apps Workshop
30 Aug 2020
22

7. Masukan komponen-komponen ke dalam gallery seperti di bawah inii
Power Apps Workshop
30 Aug 2020
23

2
1
3
5 6 7
Power Apps Workshop
4
8 9 10
No Component Properties No Component Properties
1 Text label ThisItem.ID 9 Text label ThisItem.'Due date'

2 Text label ThisItem.Title 10 Text label ThisItem.'Assigned to'.DisplayName
3 Text label “Description”
4 Text label ThisItem.Description
5 Text label ThisItem.Category.Value
6 Text label ThisItem.Priority.Value

30 Aug 2020
7 Text label ThisItem.Progress.Value
8 Text label ThisItem.'Start date'

24

7. Penambahan property untuk warna, button, image user, serta background.
Power Apps Workshop
30 Aug 2020
25

7. Property Color untuk Category:
If(ThisItem.Category.Value = "Development", Color.Blue,

Power Apps Workshop
If(ThisItem.Category.Value = "Design", Color.Green, Color.Purple)

)
8. Property Color untuk Priority:
If(ThisItem.Priority.Value = "Low", Color.Yellow,

If(ThisItem.Priority.Value = "Medium", Color.Orange,
If(ThisItem.Priority.Value = "High", Color.Red, Color.Gray)
)
)
30 Aug 2020
26

9. Property Color untuk Progress:
If(ThisItem.Progress.Value = "Not Started", Color.Gray,

Power Apps Workshop
If(ThisItem.Progress.Value = "In progress", Color.Blue,

If(ThisItem.Progress.Value = "Completed", Color.Green, Color.Red)
)
)
10. Property HtmlText untuk Background:
"<div style='margin:10px;width:1320px;height: 170px;background-

color:#FFF;box-shadow:5px 5px 10px 5px #ccc; border-radius:15px'></div>"
30 Aug 2020
27
3
Power Apps Workshop
Create Search & Filter

Function
30 Aug 2020
28
Exercise– Create Search & Filter Function

9. Tambahkan 4 Combo box dan 1 Button di atas Gallery
Power Apps Workshop
30 Aug 2020
29

2. Combobox akan kita akan gunakan untuk melakukan filter gallery berdasarkan field dari Work Progress.
• Combo box pertama berdasarkan ‘Title’,
• Combo box kedua berdasarkan ‘Category’,
• Combo box ketiga berdasarkan “Priority’,
Power Apps Workshop
• Combo box terakhir berdasarkan ‘Progress’.

30 Aug 2020
30

3. Set Function Items combo box pertama menjadi:
Distinct('Work Progress'.Title,Title)
Power Apps Workshop
Dan atur pada Advanced Properties :
Property Value Description

InputTextPlaceHolder “Select Works” Menampilkan text sebelum di pilih (untuk
searchable = true)
NoSelectionText “Select Works” Menampilkan text sebelum di pilih (untuk
searchable = false)
isSearchable true Bisa melakukan auto complete search
30 Aug 2020
31

4. Set Function Items combo box kedua menjadi:
Distinct('Work Progress'.Category,Category.Value)
Power Apps Workshop

InputTextPlaceHolder "Select Categories" Menampilkan text sebelum di pilih (untuk
searchable = true)
NoSelectionText "Select Categories" Menampilkan text sebelum di pilih (untuk
searchable = false)
30 Aug 2020
32

Distinct('Work Progress'.Priority,Priority.Value)
Power Apps Workshop

InputTextPlaceHolder "Select Priorities" Menampilkan text sebelum di pilih (untuk
searchable = true)
NoSelectionText "Select Priorities" Menampilkan text sebelum di pilih (untuk
searchable = false)
30 Aug 2020
33

Distinct('Work Progress'.Progress,Progress.Value)
Power Apps Workshop

InputTextPlaceHolder "Select Progress" Menampilkan text sebelum di pilih (untuk
searchable = true)
NoSelectionText "Select Progress" Menampilkan text sebelum di pilih (untuk
searchable = false)
30 Aug 2020
34

Distinct('Work Progress'.Progress,Progress.Value)
Power Apps Workshop

InputTextPlaceHolder "Select Progress" Menampilkan text sebelum di pilih (untuk
searchable = true)
NoSelectionText "Select Progress" Menampilkan text sebelum di pilih (untuk
searchable = false)
30 Aug 2020
35

7. Ubah nama komponen combo box dan button.
Power Apps Workshop
8. Ubah Function On Select pada ButtonReset menjadi
Reset(ComboBoxCategory);
Reset(ComboBoxPriority);
Reset(ComboBoxWorks);
Reset(ComboBoxProgress);
30 Aug 2020
36

9. Ubah function Items pada Gallery menjadi
Filter(
Power Apps Workshop
'Work Progress',
If(!IsBlank(ComboBoxWorks.Selected.Result), Title in ComboBoxWorks.SelectedItems, true),
If(!IsBlank(ComboBoxCategory.Selected.Result), Category.Value in ComboBoxCategory.SelectedItems, true),
If(!IsBlank(ComboBoxPriority.Selected.Result), Priority.Value in ComboBoxPriority.SelectedItems, true),
If(!IsBlank(ComboBoxProgress.Selected.Result), Progress.Value in ComboBoxProgress.SelectedItems, true)
)
10. Silahkan lakukan filter pada aplikasi, jika berhasil maka gallery akan terfilter
30 Aug 2020
37

9. Ubah function Items pada Gallery menjadi
Filter(
Power Apps Workshop
'Work Progress',
If(!IsBlank(ComboBoxWorks.Selected.Result), Title in ComboBoxWorks.SelectedItems, true),
If(!IsBlank(ComboBoxCategory.Selected.Result), Category.Value in ComboBoxCategory.SelectedItems, true),
If(!IsBlank(ComboBoxPriority.Selected.Result), Priority.Value in ComboBoxPriority.SelectedItems, true),
If(!IsBlank(ComboBoxProgress.Selected.Result), Progress.Value in ComboBoxProgress.SelectedItems, true)
)
10. Silahkan lakukan filter pada aplikasi, jika berhasil maka gallery akan terfilter
30 Aug 2020
38

11. Tambahkan beberapa text label di atas filter
Power Apps Workshop
12. Function untuk jumlah per progress
CountIf('Work Progress',Progress.Value in "Not Started")

13. Function untuk jumlah total
30 Aug 2020
CountRows('Work Progress')
39
4
Power Apps Workshop
CRUD Function
30 Aug 2020
40

1. Buat Halaman Baru
2. Copy Top menu di halaman
utama
3. Masukan Edit Form
Power Apps Workshop
4. Pilih data source Work

Progress.
5. Ubah nama Form1 menjadi
WorkProgressForm
6. Sesuaikan posisi masing-
masing komponen pada
form.
30 Aug 2020
41
5
Power Apps Workshop
Notes Function
30 Aug 2020
42

Workshop Power Apps - Day 2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Workshop Power Apps - Day 2

Uploaded by

Copyright:

Available Formats

Day - 2

Work Progress Tracker Application

Initialize Data Source

Exercise - Initialize Data Source

Exercise - Initialize Data Source

Exercise - Initialize Data Source

Exercise - Initialize Data Source

Exercise - Initialize Data Source

Exercise - Initialize Data Source

Nama Kolom Tipe Kolom

Description Multiple lines of text

Start date Date and time

Due date Date and time

Exercise - Initialize Data Source

Exercise - Initialize Data Source

Exercise - Initialize Data Source

Exercise - Initialize Data Source

Work Progress Tracker Application

Create Top Menu &

Exercise– Create Top Menu & Gallery

2. Klik Blank App

Exercise– Create Top Menu & Gallery

Exercise– Create Top Menu & Gallery

Exercise– Create Top Menu & Gallery

Exercise– Create Top Menu & Gallery

Exercise– Create Top Menu & Gallery

Exercise– Create Top Menu & Gallery

3 Text label “Work Progress

5 Text label User().Email

Exercise– Create Top Menu & Gallery

Exercise– Create Top Menu & Gallery

Exercise– Create Top Menu & Gallery

No Component Properties No Component Properties

1 Text label ThisItem.ID 9 Text label ThisItem.'Due date'

3 Text label “Description”

4 Text label ThisItem.Description

5 Text label ThisItem.Category.Value

6 Text label ThisItem.Priority.Value

7 Text label ThisItem.Progress.Value

8 Text label ThisItem.'Start date'

Exercise– Create Top Menu & Gallery

Exercise– Create Top Menu & Gallery

If(ThisItem.Category.Value = "Development", Color.Blue,

If(ThisItem.Category.Value = "Design", Color.Green, Color.Purple)

8. Property Color untuk Priority:

If(ThisItem.Priority.Value = "Low", Color.Yellow,

Exercise– Create Top Menu & Gallery

If(ThisItem.Progress.Value = "Not Started", Color.Gray,

If(ThisItem.Progress.Value = "In progress", Color.Blue,

"<div style='margin:10px;width:1320px;height: 170px;background-

Work Progress Tracker Application

Create Search & Filter

Exercise– Create Search & Filter Function

Exercise– Create Search & Filter Function

• Combo box terakhir berdasarkan ‘Progress’.

Exercise– Create Search & Filter Function

Dan atur pada Advanced Properties :

Property Value Description

Exercise– Create Search & Filter Function

Dan atur pada Advanced Properties :

Property Value Description

Exercise– Create Search & Filter Function

Dan atur pada Advanced Properties :

Property Value Description