honeymoose/sp-dev-fx-webparts
1
0
Fork 0
mirror of https://github.com/pnp/sp-dev-fx-webparts.git synced 2025-03-05 19:29:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

got user photos from /_layouts/15/userphoto.aspx

Browse Source
This commit is contained in:
vman 2016-09-14 23:48:45 +01:00
parent e363aa193d
commit 97898794ff
4 changed files with 44 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
samples/OrganisationChart/src/webparts/organisationChart/components/OrganisationChart.tsx
View File

@ -21,6 +21,7 @@ export interface IOrganisationChartProps extends IOrganisationChartWebPartProps
export default class OrganisationChart extends React.Component<IOrganisationChartProps, IOrganisationChartWebPartState> {
private userProfileServiceInstance: IUserProfileService;
constructor(props: IOrganisationChartProps) {
super(props);
@ -32,6 +33,28 @@ export default class OrganisationChart extends React.Component<IOrganisationChar
},
reports: [],
};
let serviceScope: ServiceScope;
const userProfileServiceKey: ServiceKey<IUserProfileService> = ServiceKey.create<IUserProfileService>("userprofileservicekey", UserProfileService);
// Based on the type of environment, return the correct instance of the IUserProfileService interface
const currentEnvType = this.props.environmentType;
if (currentEnvType == EnvironmentType.SharePoint || currentEnvType == EnvironmentType.ClassicSharePoint) {
// Mapping to be used when webpart runs in SharePoint.
// Get hold of the webpart's service scope object
serviceScope = this.props.serviceScope;
}
else {
// This means webpart is running in the local workbench or from a unit test.
// So we will need a non default implementation of the UserProfileService i.e. MockUserProfileService
// Create a child service scope and include the mapping to the MockUserProfileService
serviceScope = this.props.serviceScope.startNewChild();
serviceScope.createAndProvide(userProfileServiceKey, MockUserProfileService);
serviceScope.finish();
}
this.userProfileServiceInstance = serviceScope.consume(userProfileServiceKey);
}
public render(): JSX.Element {
@ -46,7 +69,7 @@ export default class OrganisationChart extends React.Component<IOrganisationChar
<div className="ms-Persona">
<div className="ms-Persona-imageArea">
<i className="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
<img className="ms-Persona-image" src={manager.PictureUrl}></img>
<img className="ms-Persona-image" src={ this.getProfilePhoto(manager.PictureUrl) }></img>
</div>
<div className="ms-Persona-details">
<div className="ms-Persona-primaryText">{manager.DisplayName}</div>
@ -65,7 +88,7 @@ export default class OrganisationChart extends React.Component<IOrganisationChar
<div className="ms-Persona">
<div className="ms-Persona-imageArea">
<i className="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
<img className="ms-Persona-image" src={this.state.user.PictureUrl}></img>
<img className="ms-Persona-image" src={ this.getProfilePhoto(this.state.user.PictureUrl) }></img>
</div>
<div className="ms-Persona-details">
<div className="ms-Persona-primaryText">{this.state.user.DisplayName}</div>
@ -85,7 +108,7 @@ export default class OrganisationChart extends React.Component<IOrganisationChar
<div className="ms-Persona">
<div className="ms-Persona-imageArea">
<i className="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
<img className="ms-Persona-image" src={report.PictureUrl}></img>
<img className="ms-Persona-image" src={ this.getProfilePhoto(report.PictureUrl) }></img>
</div>
<div className="ms-Persona-details">
<div className="ms-Persona-primaryText">{report.DisplayName}</div>
@ -108,42 +131,23 @@ export default class OrganisationChart extends React.Component<IOrganisationChar
this._getUserProperties();
}
public getProfilePhoto(photoUrl: string): string {
return this.userProfileServiceInstance.getProfilePhoto(photoUrl);
}
private _getUserProperties(): void {
let serviceScope: ServiceScope;
const userProfileServiceKey: ServiceKey<IUserProfileService> = ServiceKey.create<IUserProfileService>("userprofileservicekey", UserProfileService);
let userProfileServiceInstance: IUserProfileService;
// Based on the type of environment, return the correct instance of the IUserProfileService interface
const currentEnvType = this.props.environmentType;
if (currentEnvType == EnvironmentType.SharePoint || currentEnvType == EnvironmentType.ClassicSharePoint) {
// Mapping to be used when webpart runs in SharePoint.
// Get hold of the webpart's service scope object
serviceScope = this.props.serviceScope;
}
else {
// This means webpart is running in the local workbench or from a unit test.
// So we will need a non default implementation of the UserProfileService i.e. MockUserProfileService
// Create a child service scope and include the mapping to the MockUserProfileService
serviceScope = this.props.serviceScope.startNewChild();
serviceScope.createAndProvide(userProfileServiceKey, MockUserProfileService);
serviceScope.finish();
}
userProfileServiceInstance = serviceScope.consume(userProfileServiceKey);
// Get the current user details
userProfileServiceInstance.getPropertiesForCurrentUser().then((person: IPerson) => {
this.userProfileServiceInstance.getPropertiesForCurrentUser().then((person: IPerson) => {
this.setState({ user: person });
// Get manager details
userProfileServiceInstance.getManagers(person.ExtendedManagers).then((mngrs: IPerson[]) => {
this.userProfileServiceInstance.getManagers(person.ExtendedManagers).then((mngrs: IPerson[]) => {
this.setState({ managers: mngrs });
});
// Get details for reports
userProfileServiceInstance.getReports(person.DirectReports).then((rprts: IPerson[]) => {
this.userProfileServiceInstance.getReports(person.DirectReports).then((rprts: IPerson[]) => {
this.setState({ reports: rprts });
});
});

1
samples/OrganisationChart/src/webparts/organisationChart/interfaces/IUserProfileService.ts
View File

@ -4,4 +4,5 @@ export interface IUserProfileService {
getPropertiesForCurrentUser: () => Promise<IPerson>;
getManagers: (userLoginNames: string[]) => Promise<IPerson[]>;
getReports: (userLoginNames: string[]) => Promise<IPerson[]>;
getProfilePhoto: (photoUrl: string) => string;
}

4
samples/OrganisationChart/src/webparts/organisationChart/mocks/MockUserProfileService.ts
View File

@ -37,4 +37,8 @@ export class MockUserProfileService implements IUserProfileService {
resolve(users);
});
}
public getProfilePhoto(photoUrl: string){
return photoUrl;
}
}

6
samples/OrganisationChart/src/webparts/organisationChart/services/UserProfileService.ts
View File

@ -64,4 +64,10 @@ export class UserProfileService implements IUserProfileService {
});
});
}
//SharePoint does not return the userphoto if the current user has not currently signed in to the my site. (ODfB site)
//This method of getting the user photo works in all scenarios.
public getProfilePhoto(photoUrl: string){
return `/_layouts/15/userphoto.aspx?size=M&url=${photoUrl}`;
}
}