Skip to content

Commit 2e5d48f

Browse files
joel-lindstromjoel-lindstrom
committed
Create how-to-architecture.md
1 parent f59a5e5 commit 2e5d48f

File tree

1 file changed

+283
-0
lines changed

1 file changed

+283
-0
lines changed

‎powerapps-docs/teams/how-to-architecture.md

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
Contents
2+
3+
[Document Objective 2](#_Toc74830281)
4+
5+
[Introduction 2](#_Toc74830282)
6+
7+
[Data Model 3](#_Toc74830283)
8+
9+
> [Entities 4](#_Toc74830284)
10+
11+
[Story 5](#_Toc74830285)
12+
13+
> [App 5](#_Toc74830286)
14+
15+
> [OnStart 5](#_Toc74830287)
16+
17+
> [Loading Screen 6](#_Toc74830288)
18+
19+
> [Home Screen 8](#_Toc74830289)
20+
21+
> [Displaying the Welcome Dialog 8](#_Toc74830290)
22+
23+
> [Displaying the Profile screen 10](#_Toc74830291)
24+
25+
> [Home Screen 11](#_Toc74830292)
26+
27+
> [Random Match Screen 13](#_Toc74830293)
28+
29+
> [Connect with someone new 13](#_Toc74830294)
30+
31+
> [Peer Match Screen 14](#_Toc74830295)
32+
33+
> [Connect with a peer 14](#_Toc74830296)
34+
35+
> [Skills Match Screen 15](#_Toc74830297)
36+
37+
> [Connect with someone by skills 15](#_Toc74830298)
38+
39+
> [Expert Match Screen 16](#_Toc74830299)
40+
41+
> [Connect with an Expert 16](#_Toc74830300)
42+
43+
> [About Screen 17](#_Toc74830301)
44+
45+
> [Navigation 17](#_Toc74830302)
46+
47+
> [Body 17](#_Toc74830303)
48+
49+
[Collections 18](#_Toc74830304)
50+
51+
[Global Variables 19](#_Toc74830305)
52+
53+
# Document Objective
54+
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.
95+
96+
- **Item Type Demo**
97+
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.
100+
101+
# Story
102+
103+
## App
104+
105+
### OnStart
106+
107+
#### Collections involved
108+
109+
| **Collection name** | **Description** |
110+
|---------------------|-------------------------------------------------------|
111+
| colLocalization | Collection of localized text based on users language. |
112+
113+
#### Variables involved
114+
115+
| **Variable name** | **Description** |
116+
|-----------------------|---------------------------------------------------------------|
117+
| gblAppLoaded | - global variable to check if the app has loaded completely. |
118+
| gblUserLanguage | - global variable to store the users language. |
119+
| **gblCurrUserEmail** | - global variable to store the current user email address |
120+
| gblCurrUser | - global variable to store the current user record |
121+
122+
#### Detailed Steps
123+
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.
127+
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**.
130+
131+
## Welcome Screen
132+
133+
![](media/eb46e5290638897f9cb053ed62cad85e.png)
134+
135+
#### Collections involved
136+
137+
| **Collection name** | **Description** |
138+
|---------------------|--------------------------------------------------------|
139+
| colLocalization | collection of localized text based on user’s language. |
140+
141+
#### Variables involved
142+
143+
| **Variable name** | **Description** |
144+
|---------------------------------|--------------------------------------------------------------------------------------------------------------|
145+
| **gblCurrUserEmail** | - global variable to store the current user email address |
146+
| gblThemeDark | - global variable to store if Teams is running in dark mode. |
147+
| gblThemeHiCo | - global variable to store if Teams is running in contrast mode. |
148+
| gblAppColors | - global variable to store the app design colors |
149+
| gblAppSizes | - global variable to store the app sizes for app in mobile and mobile on web |
150+
| gblAppStyles | - global variable to store styling properties for all controls (set on the OnVisible of the Loading Screen). |
151+
| gblAppSetting_inputMobileOnWeb | - global variable to scale fonts for mobile-oriented apps, running in desktop. |
152+
| gblAppSetting_inputMobile | - global variable to scale fonts for mobile-oriented apps. |
153+
| gblAppSetting_inputScaleFontsBy | - global variable for scaling all fonts by a fixed amount. |
154+
155+
#### Detailed steps
156+
157+
1. If **gblAppStyles** is not blank (which means the styling variable has been
158+
loaded),
159+
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
164+
165+
3. In this screen you will find **Preview App**. Click on it which will
166+
redirect to Assets Screen
167+
168+
## Items Screen
169+
170+
![](media/d030439a92050d8654943d93ffc6652c.png)
171+
172+
#### Collections involved
173+
174+
| **Variable name** | **Description** |
175+
|-------------------|----------------------------------------------------------|
176+
| colLocalization | - collection of localized text based on user’s language. |
177+
178+
####
179+
Variables involved
180+
181+
| **Variable name** | **Description** |
182+
|--------------------------|--------------------------------------------------------------------------------------------------------------|
183+
| **locShowItems** | - local variable to show the items based on item type. |
184+
| **locSelectedItemType** | - local variable to show the selected item types |
185+
| **gblThemeDark** | - global variable to store if Teams is running in dark mode. |
186+
| **gblThemeHiCo** | - global variable to store if Teams is running in contrast mode. |
187+
| gblAppColors | - global variable to store the app design colors |
188+
| **gblAppStyles** | - global variable to store styling properties for all controls (set on the OnVisible of the Loading Screen). |
189+
190+
#### Detailed steps
191+
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.
194+
195+
2. The items will be show in galItems_Demo when user select any of the itemtype
196+
in galItemTypes_Demo.
197+
198+
## Checkout Screen
199+
200+
![](media/16e97c5f4570579838a294c9b15ddbd9.png)
201+
202+
![](media/b94e51d97ba66cc0c0b63acec040e70f.png)
203+
204+
#### Collections involved
205+
206+
| Collections | Description |
207+
|-----------------|--------------------------------------------------------|
208+
| colLocalization | collection of localized text based on user’s language. |
209+
210+
#### Variables involved
211+
212+
| Variable name | Description |
213+
|-----------------------------|------------------------------------------------------------------------|
214+
| gblAppStyles | global variable to store styling properties for all controls |
215+
| gblThemeDark | global variable to store if Teams is running in dark mode |
216+
| locShowCheckoutConfirmation | local variable to show the connection by randomly shuffling the userid |
217+
| gblAppColors | global variable to store the app design colors |
218+
| gblThemeHiCo | global variable to store if Teams is running in contrast mode. |
219+
| locSelectedItem | global variable to store the current user email address |
220+
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.
226+
227+
2. Once the item is checked out the confirmation message will be shown from
228+
locShowCheckoutConfirmation.
229+
230+
## My Checkout Screen
231+
232+
![](media/fb3dbca28066cdb97017bfad8cc625bc.png)
233+
234+
![](media/c47d9d224be9b7e2c0c3f7b9af07fba8.png)
235+
236+
#### Collections involved
237+
238+
| Variable name | Description |
239+
|------------------|--------------------------------------------------------|
240+
| colLocalization | collection of localized text based on user’s language. |
241+
242+
#### Variables involved
243+
244+
| Variable name | Description |
245+
|---------------------------|------------------------------------------------------------------------------------------------------------|
246+
| gblAppStyles | global variable to store styling properties for all controls (set on the OnVisible of the Loading Screen). |
247+
| gblThemeDark | global variable to store if Teams is running in dark mode. |
248+
| gblThemeHiCo | global variable to store if Teams is running in contrast mode. |
249+
| gblAppColors | global variable to store the app design colors |
250+
| locShowReturnConfirmation | Local variable to show the return confirmation message when user click on return button |
251+
| locSelectedItemType | local variable to show the selected item types |
252+
| locShowItems | local variable to show the items based on item types |
253+
| gblCurrUser | global variable to store the current user record |
254+
| locSelectedItemForReturn | local variable to return the selected item back to items |
255+
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
264+
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 |
268+
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 |

0 commit comments

Comments
 (0)