Alfresco User Info Component for Angular 2
Node
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
Prerequisites
Before you start using this development framework, make sure you have installed all required software and done all the necessary configuration, see this page.
Installation
npm install ng2-alfresco-userinfo --save
Dependencies
Add the following dependency to your index.html:
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
You must separately install the following libraries for your application:
npm install --save ng2-translate ng2-alfresco-core
Material Design Lite
The style of this component is based on material design, so if you want to visualize it correctly you have to add the material design dependency to your project:
npm install --save material-design-icons material-design-lite
Also make sure you include these dependencies in your index.html file:
<!-- Google Material Design Lite -->
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
<script src="node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
Example
Basic usage
<alfresco-document-list
[ecmBackgroundImage]="pathToEcmBannerImage"
[bpmBackgroundImage]="pathToBpmBannerImage"
[fallBackThumbnailImage]="pathToDefaultImage">
</alfresco-document-list>
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| ecmBackgroundImage | string | Custom path for the background banner image for ECM users | |
| bpmBackgroundImage | string | Custom path for the background banner image for BPM users | |
| menuOpenType | string | bottom-right | Custom choice for opening menu bottom right or bottom left |
| fallBackThumbnailImage | string | image at ng2-alfresco-userinfo/src/img/anonymous.gif | Fallback image for profile when thubnail is missing |
This will show a round icon with user and on click some user information are showed. If user is logged in with ECM and BPM the ECM image will be showed.
NPM scripts
| Command | Description |
|---|---|
| npm run build | Build component |
| npm run build:w | Build component and keep watching the changes |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser |
| npm run coverage | Run unit tests and display code coverage report |
History
For detailed changelog, check Releases.