O365 SharePoint Online: Business Card development
Functional Requirement
Seamless Business Card development based on the available metadata of SharePoint User Profile on O365.
https://gallery.technet.microsoft.com/site/view/file/160317/1/angular-js-based-apps-demo.gif
Download
Development Configurations
Once the above-linked source code is downloaded. On uncompressed the source code, please upload the files to the specific document library and use below detailed steps to use it to content editor webpart.
Click here for: Step by step creating Content Editor webpart and associate with HTML
Solution Architecture
Based on the above requirement there are various ways to implement the same. Based on my past experience and availability of lightweight technologies, I have opted AngularJS based solution, Principal Architecture of the same is as depicted below,
A, B and C
Represents deployment of the Azure AD Connect tool (DirSync) on a virtual machine in Azure to synchronize accounts between your on-premises directory and your Azure AD tenant with Office 365
D
Represents Azure (the DirSync server) synchronizing on-premises AD DS to Office 365
E
O365 tenant
F
User Profile metadata for a specific user
G
Depicts the view - HTML - It binds the data provided by the H and I
H and I
Model and Controller for AngularJS - consists of the all functions and HTTPS REST API call implementation - This is also responsible to load the data to the collection objects
J
Binding of data
K
Referencing the Model to connect with View and Controller - All files are deployed to Document Library
L
REST API - http GET call to fetch the item from user profile services of O365