Skip to content

Commit ce9ad0d

Browse files
Created How to architecture
1 parent 2e5d48f commit ce9ad0d

File tree

3 files changed

+104
-159
lines changed

3 files changed

+104
-159
lines changed
Lines changed: 104 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,108 @@
1-
Contents
1+
---
2+
title: Understand How to app sample app architecture | Microsoft Docs
3+
description: Learn about the architecture of the How to app sample app.
4+
author: joel-lindstrom
5+
ms.service: powerapps
6+
ms.topic: conceptual
7+
ms.custom:
8+
ms.date: 06/21/2021
9+
ms.author: v-ljoel
10+
ms.reviewer: tapanm
11+
contributors:
12+
- navjotm
13+
---
214

3-
[Document Objective 2](#_Toc74830281)
415

5-
[Introduction 2](#_Toc74830282)
616

7-
[Data Model 3](#_Toc74830283)
17+
# Understand How to app sample app architecture (Preview)
818

9-
> [Entities 4](#_Toc74830284)
19+
[This article is pre-release documentation and is subject to change.]
1020

11-
[Story 5](#_Toc74830285)
21+
In this article, you'll learn about the collections and global variables used by the How to app, and understand how to use them effectively.
1222

13-
> [App 5](#_Toc74830286)
1423

15-
> [OnStart 5](#_Toc74830287)
1624

17-
> [Loading Screen 6](#_Toc74830288)
25+
## Prerequisites
1826

19-
> [Home Screen 8](#_Toc74830289)
27+
To understand and use information in this article, you'll need to know about different controls, features, and capabilities of canvas apps.
2028

21-
> [Displaying the Welcome Dialog 8](#_Toc74830290)
29+
- [Create and update a collection in a canvas app](../maker/canvas-apps/create-update-collection.md)
30+
- [Collect, Clear, and ClearCollect functions in Power Apps](../maker/canvas-apps/functions/function-clear-collect-clearcollect.md)
31+
- [Understand canvas-app variables in Power Apps](../maker/canvas-apps/working-with-variables.md)
32+
- [Add and configure a canvas-app control in Power Apps](../maker/canvas-apps/add-configure-controls.md)
33+
- [Add a screen to a canvas app and navigate between screens](../maker/canvas-apps/add-screen-context-variables.md)
2234

23-
> [Displaying the Profile screen 10](#_Toc74830291)
2435

25-
> [Home Screen 11](#_Toc74830292)
2636

27-
> [Random Match Screen 13](#_Toc74830293)
37+
## Data model
38+
The following diagram shows the tables, columns, and relationships in the How to app solution:
2839

29-
> [Connect with someone new 13](#_Toc74830294)
40+
![How to app sample app data model](media/how-to-architecture/data-model.png "How to app sample app data model")
3041

31-
> [Peer Match Screen 14](#_Toc74830295)
42+
## Tables
3243

33-
> [Connect with a peer 14](#_Toc74830296)
44+
| Table | Description |
45+
| -------------------------- | ------------------------------------------------------------ |
46+
| Item Demo | How to app is designed to help new makers learn how to make Power Apps. This table is provided as an example of the table the users will create to store items that are available to be checked out. |
47+
| Item Checkout Demo | How to app is designed to help new makers learn how to make Power Apps. This table is provided as an example of the table that the users will create to store item checkout records. |
48+
| Item Type Demo | How to app is designed to help new makers learn how to make Power Apps. This table is provided as an example of the table that the users will create to store item types for classification of items. |
49+
| Item Checkout App Stage | As the user goes through the lessons in the app, the app will store the status of their progress through the app, enabling the user to pick back up where they left off. |
50+
| Item Checkout Instructions | The instructions for proceeding through the How to app are stored in the item checkout instructions table. |
3451

35-
> [Skills Match Screen 15](#_Toc74830297)
3652

37-
> [Connect with someone by skills 15](#_Toc74830298)
3853

39-
> [Expert Match Screen 16](#_Toc74830299)
54+
## Architecture model
55+
The following diagram illustrates the way that people, systems and data interact in the How to app solution
4056

41-
> [Connect with an Expert 16](#_Toc74830300)
57+
![How to app sample app architecture model](media/how-to-architecture/architecture-model.png "How to app sample app architecture model")
4258

43-
> [About Screen 17](#_Toc74830301)
59+
### Connectors
4460

45-
> [Navigation 17](#_Toc74830302)
61+
The following connectors are used in the How to app:
4662

47-
> [Body 17](#_Toc74830303)
63+
- **Microsoft Dataverse** - Used to read and write data in Dataverse.
64+
- **Office 365 Users** - Used to read Microsoft 365 user profile data.
4865

49-
[Collections 18](#_Toc74830304)
5066

51-
[Global Variables 19](#_Toc74830305)
5267

53-
# Document Objective
68+
## Collections
69+
The following collection is used in the How to app solution:
5470

55-
This document covers the following pertaining to the How-to solution:
56-
57-
- Data model and purpose of the various entities used.
58-
59-
- List of all collections and variables used.
60-
61-
- Detailed breakdown of each functionality.
62-
63-
# Introduction
64-
65-
How-to app in Teams offer an easy-to-use experience to create the app easily.
66-
67-
Benefits of using the How to app:
68-
69-
- Understand the basics of Power Apps
70-
71-
- Design the app
72-
73-
- Share it with colleagues in Teams
74-
75-
Become a Maker
76-
77-
# Data Model
78-
79-
## Entities
80-
81-
- **Item Demo**
82-
83-
A table to store Items. Details such as Name, Item type, Quantity,
84-
Description, Created on and when was it created or modified by are stored
85-
under the Item Demo entity.
86-
87-
- **Item Checkout Demo**
88-
89-
Item Checkout Demo stores items that are added to checkout with the checkout
90-
status.
91-
92-
Details such as Name, Item, Checkout Status, Checkout Duration, Checkout
93-
Option, Checkout Reason when the items checkout was created on, modified on
94-
are stored under Item Checkout Demo entity.
71+
| Collection Name | Description | Screen Used |
72+
|-----------------|--------------------------------------------------------------------|-----------------------------|
73+
| colLocalization | Used to build a Localization Collection based on the User Language | OnStart property of the App |
9574

96-
- **Item Type Demo**
75+
## Global variables
76+
The following global variables are used in the How to app solution:
9777

98-
A Item Type Demo Entity shows type of items records such as Name, checkout
99-
address, checkout user and when it was created on, Modified on.
78+
| Variable Name | Type | Description |
79+
|---------------------------------|---------|-----------------------------------------------------------------------|
80+
| gblUserLanguage | Text | To check the logged in User’s Language |
81+
| gblThemeDark | Boolean | To check whether the Teams theme is set to Dark |
82+
| gblThemeHiCo | Boolean | To check whether the Teams theme is set to High Contrast |
83+
| gblAppSetting_inputMobileOnWeb | Boolean | Variables to Scale fonts for mobile-oriented apps, running in desktop |
84+
| gblAppSetting_inputScaleFontsby | Number | Use this variable for scaling all fonts by a fixed amount |
85+
| gblAppSetting_inputMobile | Boolean | Variables to Scale fonts for mobile-oriented apps |
86+
| gblAppColors | Record | Variable to set the Color value in the app |
87+
| gblAppSizes | Record | Variable to set the Color value in the app |
88+
| gblAppStyles | Record | Variable to set the Styling values in the app |
89+
| gblCurrUserEmail | Record | gblCurrUserEmail |
90+
| gblCurrUser | Record | global variable to store the current user record |
10091

101-
# Story
10292

103-
## App
10493

105-
### OnStart
94+
## App OnStart
95+
This section explains the collections, variables, and execution details used in the OnStart of How to app:
10696

107-
#### Collections involved
97+
### OnStart collections
98+
The following collections are used on start of the application:
10899

109100
| **Collection name** | **Description** |
110101
|---------------------|-------------------------------------------------------|
111102
| colLocalization | Collection of localized text based on users language. |
112103

113-
#### Variables involved
104+
### OnStart variables
105+
The following variables are used on start of the application:
114106

115107
| **Variable name** | **Description** |
116108
|-----------------------|---------------------------------------------------------------|
@@ -119,26 +111,24 @@ Benefits of using the How to app:
119111
| **gblCurrUserEmail** | - global variable to store the current user email address |
120112
| gblCurrUser | - global variable to store the current user record |
121113

122-
#### Detailed Steps
114+
### OnStart execution details
123115

124-
1. When a user accesses the app, **gblAppLoaded** is set to false. The user’s
125-
language code is stored in **gblUserLanguage**, with English - US being the
126-
default one.
116+
1. When a user accesses the app, **gblAppLoaded** is set to false. The user’s language code is stored in **gblUserLanguage**, with English - US being the default one.
127117

128-
2. The user’s language is then used to collect localized text used throughout
129-
the app (e.g. label and button text) in **colLocalization**.
118+
2. The user’s language is then used to collect localized text used throughout the app ( label and button text) in **colLocalization**.
130119

131120
## Welcome Screen
121+
This section explains the collections, variables, and execution details used in the welcome screen:
132122

133-
![](media/eb46e5290638897f9cb053ed62cad85e.png)
134-
135-
#### Collections involved
123+
### Welcome screen collections
124+
The following collections are used in the welcome screen:
136125

137126
| **Collection name** | **Description** |
138127
|---------------------|--------------------------------------------------------|
139128
| colLocalization | collection of localized text based on user’s language. |
140129

141-
#### Variables involved
130+
### Welcome screen variables
131+
The following variables are used in the welcome screen:
142132

143133
| **Variable name** | **Description** |
144134
|---------------------------------|--------------------------------------------------------------------------------------------------------------|
@@ -152,32 +142,25 @@ Benefits of using the How to app:
152142
| gblAppSetting_inputMobile | - global variable to scale fonts for mobile-oriented apps. |
153143
| gblAppSetting_inputScaleFontsBy | - global variable for scaling all fonts by a fixed amount. |
154144

155-
#### Detailed steps
156-
157-
1. If **gblAppStyles** is not blank (which means the styling variable has been
158-
loaded),
145+
### Welcome screen execution details
159146

160-
2. The loading screen will initialize all the global variables like
161-
**gblAppStyles, gblAppSizes,** gblAppColors to show the screen and color
162-
settings as per the user setup like dark mode or high contrast mode in Teams
163-
desktop or in browser
147+
1. If **gblAppStyles** is not blank (which means the styling variable has been loaded).
164148

165-
3. In this screen you will find **Preview App**. Click on it which will
166-
redirect to Assets Screen
149+
2. The loading screen will initialize all the global variables like **gblAppStyles, gblAppSizes,** gblAppColors to show the screen and color settings as per the user setup like dark mode or high contrast mode in Teams desktop or in browser.
167150

168-
## Items Screen
151+
3. In this screen you will find **Preview App**. Click on it which will redirect to Assets Screen.
169152

170-
![](media/d030439a92050d8654943d93ffc6652c.png)
171-
172-
#### Collections involved
153+
## Items screen
154+
This section explains the collections, variables, and execution details used on the items screen.
173155

156+
### Items screen collections
157+
The following collections are used on the items screen:
174158
| **Variable name** | **Description** |
175159
|-------------------|----------------------------------------------------------|
176160
| colLocalization | - collection of localized text based on user’s language. |
177161

178-
####
179-
Variables involved
180-
162+
### Items screen variables
163+
The following variables are used on teh items screen:
181164
| **Variable name** | **Description** |
182165
|--------------------------|--------------------------------------------------------------------------------------------------------------|
183166
| **locShowItems** | - local variable to show the items based on item type. |
@@ -187,28 +170,21 @@ Variables involved
187170
| gblAppColors | - global variable to store the app design colors |
188171
| **gblAppStyles** | - global variable to store styling properties for all controls (set on the OnVisible of the Loading Screen). |
189172

190-
#### Detailed steps
173+
### Items screen execution details
191174

192-
1. The items screen will show Item types with the number of items available
193-
under each item which are stored in galItemTypes_Demo.
175+
1. The items screen will show Item types with the number of items available under each item which are stored in galItemTypes_Demo.
194176

195-
2. The items will be show in galItems_Demo when user select any of the itemtype
196-
in galItemTypes_Demo.
177+
2. The items will be show in galItems_Demo when user select any of the itemtype in galItemTypes_Demo.
197178

198179
## Checkout Screen
199-
200-
![](media/16e97c5f4570579838a294c9b15ddbd9.png)
201-
202-
![](media/b94e51d97ba66cc0c0b63acec040e70f.png)
203-
204-
#### Collections involved
205-
180+
This section explains the collections, variables, and execution details used on the checkout screen.
181+
### Checkout screen collections
182+
The following collections are used on the checkout screen:
206183
| Collections | Description |
207184
|-----------------|--------------------------------------------------------|
208185
| colLocalization | collection of localized text based on user’s language. |
209-
210-
#### Variables involved
211-
186+
### Checkout screen collections
187+
The following variables are used on the checkout screen:
212188
| Variable name | Description |
213189
|-----------------------------|------------------------------------------------------------------------|
214190
| gblAppStyles | global variable to store styling properties for all controls |
@@ -217,30 +193,22 @@ Variables involved
217193
| gblAppColors | global variable to store the app design colors |
218194
| gblThemeHiCo | global variable to store if Teams is running in contrast mode. |
219195
| locSelectedItem | global variable to store the current user email address |
196+
### Checkout screen execution details
220197

221-
#### Detailed steps
222-
223-
1. When user selects any of the item which are needed, they can click on
224-
checkout based on availability of the item which are stored in
225-
locSelectedItem item.
198+
1. When user selects any of the item which are needed, they can click on checkout based on availability of the item which are stored in locSelectedItem item.
226199

227-
2. Once the item is checked out the confirmation message will be shown from
228-
locShowCheckoutConfirmation.
200+
2. Once the item is checked out the confirmation message will be shown from locShowCheckoutConfirmation.
229201

230202
## My Checkout Screen
231-
232-
![](media/fb3dbca28066cdb97017bfad8cc625bc.png)
233-
234-
![](media/c47d9d224be9b7e2c0c3f7b9af07fba8.png)
235-
236-
#### Collections involved
237-
203+
This section explains the collections, variables, and execution details used on the my checkout screen.
204+
### My checkout collections
205+
The following collections are used on the my checkout screen:
238206
| Variable name | Description |
239207
|------------------|--------------------------------------------------------|
240208
| colLocalization | collection of localized text based on user’s language. |
241209

242-
#### Variables involved
243-
210+
### My checkout variables
211+
The following variables are used on the my checkout screen:
244212
| Variable name | Description |
245213
|---------------------------|------------------------------------------------------------------------------------------------------------|
246214
| gblAppStyles | global variable to store styling properties for all controls (set on the OnVisible of the Loading Screen). |
@@ -253,31 +221,8 @@ Variables involved
253221
| gblCurrUser | global variable to store the current user record |
254222
| locSelectedItemForReturn | local variable to return the selected item back to items |
255223

256-
#### Detailed steps
257-
258-
1. All the items checked out by the user will be show in this screen. The user
259-
will have option to return and show the days due for return
260-
261-
2. Once user clicks on return the item will be returned back to items screen.
262-
263-
# Collections
224+
### My checkout execution details
264225

265-
| Collection Name | Description | Screen Used |
266-
|-----------------|--------------------------------------------------------------------|-----------------------------|
267-
| colLocalization | Used to build a Localization Collection based on the User Language | OnStart property of the App |
226+
1. All the items checked out by the user will be show in this screen. The user will have option to return and show the days due for return
268227

269-
# Global Variables
270-
271-
| Variable Name | Type | Description |
272-
|---------------------------------|---------|-----------------------------------------------------------------------|
273-
| gblUserLanguage | Text | To check the logged in User’s Language |
274-
| gblThemeDark | Boolean | To check whether the Teams theme is set to Dark |
275-
| gblThemeHiCo | Boolean | To check whether the Teams theme is set to High Contrast |
276-
| gblAppSetting_inputMobileOnWeb | Boolean | Variables to Scale fonts for mobile-oriented apps, running in desktop |
277-
| gblAppSetting_inputScaleFontsby | Number | Use this variable for scaling all fonts by a fixed amount |
278-
| gblAppSetting_inputMobile | Boolean | Variables to Scale fonts for mobile-oriented apps |
279-
| gblAppColors | Record | Variable to set the Color value in the app |
280-
| gblAppSizes | Record | Variable to set the Color value in the app |
281-
| gblAppStyles | Record | Variable to set the Styling values in the app |
282-
| gblCurrUserEmail | Record | gblCurrUserEmail |
283-
| gblCurrUser | Record | global variable to store the current user record |
228+
2. Once user clicks on return the item will be returned back to items screen.
99 KB
Loading
96.7 KB
Loading

0 commit comments

Comments
 (0)