Get User Profile & Photo

Scenario

Gets a user's profile and photo in Microsoft Graph using Jigx functions, and displays the profile and photo on a jig using the image and entity component.

Resource links:

1. Profile Photo Graph documentation

2. Graph Get a User documentation

3. Graph explorer

4. Configuring OAuth for MS Graph

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

Examples and code snippets

When using the code and samples in this topic, remember that they are designed to function as part of a comprehensive solution. To fully benefit from the intended functionality and ensure compatibility, it is recommended that you use the entire solution rather than selecting individual components in isolation. Alternatively, you can use these samples as a guide to understand the underlying concepts and MS Graph API, which can help you integrate similar solutions into your projects more effectively. The entire MS Graph solution is available on GitHub.

General

index.jigx

name: ms-graph-demonstrator
title: MS Graph Demonstrator
description: A solution using Microsoft Graph APIs .
category: business

onLoad:
  type: action.execute-action
  options:
    action: full-sync

onRefresh:
  type: action.execute-action
  options:
    action: full-sync

expressions:
  today: =$substring($now(), 0, 10)
  todayStart: =$toMillis($today)
  weekdayStr: =$floor($todayStart/86400000)
  weekdayNum: =($weekdayStr + 4) % 7
  startOfWeek: =$todayStart - ($weekdayNum * 86400000)
  thisWeek: =$startOfWeek + 604800000
  next7: =$number($todayStart) + 604800000

tabs:
  home:
    jigId: home
    icon: home

home.jigx

Functions

MS Graph User functions in GitHub.

get-user-profile.jigx

provider: DATA_PROVIDER_REST
method: GET
url: https://graph.microsoft.com/v1.0/me
useLocalCall: true
outputTransform: $
parameters:
  accessToken:
    location: header
    required: true
    type: string
    # Use manage.jigx.com to define credentials for your solution.
    value: microsoft.OAuth 

get-profile-picture.jigx

Jigs

MS Graph User jig in GitHub.

view-user-jigx.jigx

title: View User Profile
description: Displays a user's profile information from Microsoft Graph
type: jig.default
icon: person

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://support.content.office.net/en-us/media/f1c4b693-4670-4e7a-8102-bbf1749e83fe.jpg

onRefresh:
  type: action.sync-entities
  options:
    provider: DATA_PROVIDER_REST
    entities:
      - entity: user-profile
        function: get-user-profile
        parameters:
          accessToken: microsoft.OAuth
      - entity: profile-picture
        function: get-profile-picture
        parameters:
          accessToken: microsoft.OAuth
          userId: [email protected]
      - entity: user-emails
        function: get-user-emails-addresses
        parameters:
          accessToken: microsoft.OAuth

datasources:
  userProfile:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL
      entities:
        - entity: user-profile
      query: |
        SELECT id, 
        '$.displayName', 
        '$.givenName', 
        '$.jobTitle', 
        '$.mail',
        '$.mobilePhone',
        '$.officeLocation',
        '$.surname',
        '$.userPrincipalName',
        '$.businessPhones',
        '$.id' 
        FROM [user-profile]
      isDocument: true

  profilePhoto:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL
      entities:
        - entity: profile-picture
      query: SELECT id, '$.userId', '$.data' FROM [profile-picture]
      isDocument: true

  userEmails:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL
      entities:
        - entity: user-emails
      query: SELECT id, '$.address', '$.type', '$.allowedAudiences' FROM [user-emails]

children:
  - type: component.image
    options:
      source:
        uri: [email protected]
      height: 200
      resizeMode: contain
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Email
            value: [email protected]
            contentType: email
        - type: component.entity-field
          options:
            label: User Principal Name
            value: [email protected]
        - type: component.entity-field
          options:
            label: Display Name
            value: [email protected]
        - type: component.field-row
          options:
            children:
              - type: component.entity-field
                options:
                  label: Given Name
                  value: [email protected]
              - type: component.entity-field
                options:
                  label: Surname
                  value: [email protected]
        - type: component.field-row
          options:
            children:
              - type: component.entity-field
                options:
                  label: Job Title
                  value: [email protected]
              - type: component.entity-field
                options:
                  label: Mobile Phone
                  value: [email protected]
        - type: component.entity-field
          options:
            label: Office Location
            value: [email protected]
  - type: component.section
    options:
      title: Email Addresses
      children:
        - type: component.list
          options:
            data: [email protected]
            maximumItemsToRender: 8
            item:
              type: component.list-item
              options:
                divider: solid
                leftElement:
                  element: icon
                  icon: email
                title: [email protected]
                subtitle: |
                  ="Type: " & @ctx.current.item.type
                description: |
                  ="Allowed Audiences: " & @ctx.current.item.allowedAudiences

actions:
  - children:
      - type: action.go-to
        options:
          title: Update Profile Picture
          linkTo: update-profile-picture

widgets:
  profileAvatar:
    type: widget.group
    options:
      children:
        - type: widget.avatar
          options:
            text: "Your Profile"
            uri: [email protected]
            bottom:
              type: component.titles
              options:
                align: center
                title: [email protected]
                subtitle: [email protected]

  profileImage:
    type: widget.image
    options:
      isContentOverlaid: true
      source:
        uri: [email protected]
      bottom:
        type: component.titles
        options:
          title: [email protected]
          subtitle: [email protected]

See Also

• Update Profile Photo