Data Providers
...
MS Graph
Graph User Profile
Get User Profile & Photo
6min
Gets a user's profile and photo in Microsoft Graph using functions, and displays the profile and photo on a using the image and entity component.
Resource links:
Required OAuth scope (least to most privilege):
User.Read User.ReadWrite User.ReadBasic.All User.Read.All User.ReadWrite.All Directory.Read.All Directory.ReadWrite.All
User Profile
index.jigx
1name: ms-graph-demonstrator
2title: MS Graph Demonstrator
3description: A sample solution that uses the Microsoft Graph API. You can deploy and use this solution without any additional configuration.
4category: business
5widgets:
6 - size: 2x2 # choose size of the widget on the home hub
7 jigId: view-user-jigx
8
9onFocus:
10 type: action.action-list
11 options:
12 isSequential: true
13 actions:
14 - type: action.sync-entities
15 options:
16 provider: DATA_PROVIDER_REST
17 entities:
18 - entity: user-profile
19 function: get-user-profile
20 functionParameters:
21 accessToken: microsoft.OAuth
22 - entity: profile-picture
23 function: get-profile-picture
24 functionParameters:
25 accessToken: microsoft.OAuth
26 userId: [email protected]
27 - entity: user-emails
28 function: get-user-emails-addresses
29 functionParameters:
30 accessToken: microsoft.OAuth
31
MS Graph User functions in GitHub.
get-user-profile.jigx
get-profile-picture.jigx
1provider: DATA_PROVIDER_REST
2method: GET
3format: pdf #pdf indicates a generic binary type
4url: https://graph.microsoft.com/v1.0/me/photo/$value
5outputTransform: $.{"data":$.data,"userId":$.inputs.userId.value} #add the email input to the output to identify image later in select
6
7parameters:
8 accessToken:
9 location: header
10 required: true
11 type: string
12 value: microsoft.OAuth #Use manage.jigx.com to define credentials for your solution
13 userId:
14 type: string
15 location: path
16 required: true
17conversions:
18 - property: data
19 from: base64
20 to: local-uri
MS Graph User in GitHub.
view-user-jigx.jigx
1title: View User Profile
2description: Displays a user's profile information from Microsoft Graph
3type: jig.default
4icon: person
5
6header:
7 type: component.jig-header
8 options:
9 height: small
10 children:
11 type: component.image
12 options:
13 source:
14 uri: https://support.content.office.net/en-us/media/f1c4b693-4670-4e7a-8102-bbf1749e83fe.jpg
15
16onRefresh:
17 type: action.sync-entities
18 options:
19 provider: DATA_PROVIDER_REST
20 entities:
21 - entity: user-profile
22 function: get-user-profile
23 functionParameters:
24 accessToken: microsoft.OAuth
25 - entity: profile-picture
26 function: get-profile-picture
27 functionParameters:
28 accessToken: microsoft.OAuth
29 userId: [email protected]
30 - entity: user-emails
31 function: get-user-emails-addresses
32 functionParameters:
33 accessToken: microsoft.OAuth
34
35datasources:
36 userProfile:
37 type: datasource.sqlite
38 options:
39 provider: DATA_PROVIDER_LOCAL
40 entities:
41 - entity: user-profile
42 query: |
43 SELECT id,
44 '$.displayName',
45 '$.givenName',
46 '$.jobTitle',
47 '$.mail',
48 '$.mobilePhone',
49 '$.officeLocation',
50 '$.surname',
51 '$.userPrincipalName',
52 '$.businessPhones',
53 '$.id'
54 FROM [user-profile]
55 isDocument: true
56
57 profilePhoto:
58 type: datasource.sqlite
59 options:
60 provider: DATA_PROVIDER_LOCAL
61 entities:
62 - entity: profile-picture
63 query: SELECT id, '$.userId', '$.data' FROM [profile-picture]
64 isDocument: true
65
66 userEmails:
67 type: datasource.sqlite
68 options:
69 provider: DATA_PROVIDER_LOCAL
70 entities:
71 - entity: user-emails
72 query: SELECT id, '$.address', '$.type', '$.allowedAudiences' FROM [user-emails]
73
74children:
75 - type: component.image
76 options:
77 source:
78 uri: [email protected]
79 height: 200
80 resizeMode: contain
81 - type: component.entity
82 options:
83 children:
84 - type: component.entity-field
85 options:
86 label: Email
87 value: [email protected]
88 contentType: email
89 - type: component.entity-field
90 options:
91 label: User Principal Name
92 value: [email protected]
93 - type: component.entity-field
94 options:
95 label: Display Name
96 value: [email protected]
97 - type: component.field-row
98 options:
99 children:
100 - type: component.entity-field
101 options:
102 label: Given Name
103 value: [email protected]
104 - type: component.entity-field
105 options:
106 label: Surname
107 value: [email protected]
108 - type: component.field-row
109 options:
110 children:
111 - type: component.entity-field
112 options:
113 label: Job Title
114 value: [email protected]
115 - type: component.entity-field
116 options:
117 label: Mobile Phone
118 value: [email protected]
119 - type: component.entity-field
120 options:
121 label: Office Location
122 value: [email protected]
123 - type: component.section
124 options:
125 title: Email Addresses
126 children:
127 - type: component.list
128 options:
129 data: [email protected]
130 maximumItemsToRender: 8
131 item:
132 type: component.list-item
133 options:
134 divider: solid
135 leftElement:
136 element: icon
137 icon: email
138 title: [email protected]
139 subtitle: |
140 ="Type: " & @ctx.current.item.type
141 description: |
142 ="Allowed Audiences: " & @ctx.current.item.allowedAudiences
143
144actions:
145 - children:
146 - type: action.go-to
147 options:
148 title: Update Profile Picture
149 linkTo: update-profile-picture
150
151widgets:
152 "2x4":
153 type: widget.group
154 options:
155 children:
156 - type: widget.avatar
157 options:
158 text: "Your Profile"
159 uri: [email protected]
160 bottom:
161 type: component.titles
162 options:
163 align: center
164 title: [email protected]
165 subtitle: [email protected]
166
167 "2x2":
168 type: widget.image
169 options:
170 isContentOverlaid: true
171 source:
172 uri: [email protected]
173 bottom:
174 type: component.titles
175 options:
176 title: [email protected]
177 subtitle: [email protected]
178
Updated 06 May 2024
Did this page help you?