The Alfresco Content Application is an example application built using Alfresco Application Development Framework (ADF) components.
This example application demonstrates to Angular software engineers how to construct a content application using the Alfresco ADF.
This example application represents a meaningful composition of ADF components that provide end users with a simple and easy to use interface for working with files stored in the Alfresco Content Services repository.
This application was created based on the latest releases from Alfresco:
- Alfresco ADF (2.5.0)
- Alfresco Content Services (6.0.0) or Alfresco Community Edition (6.0 - General Release: 201806)
You also need node.js (LTS) installed to build it locally from source code.
The latest version of the Alfresco Content platform is required due to the application using the latest REST APIs developments.
The concept of this example is a simple user interface which makes accessing files in the Alfresco Content Services repository easy.
Often Content Management systems provide more capabilities out of the box than most users need; providing too many capabilities to these users prevents them from working efficiently, so they may end up using unsanctioned file management solutions which presents a proliferation of content storage and collaboration solutions as well as compliance issues for organizations.
This application demonstrates how the complexity of Content Management can be simplified using the Alfresco Application Development Framework to easily and quickly create custom solutions for specific user cases.
There are three main areas of the application controlled by the Layout component:
The application header has three main elements.
Logo & app primary color - logo and color are configurable by updating the app.config.json file in the root folder of the project. Please refer to the Application Configuration documentation for more information on how to change the logo and color.
The application Search - uses the ADF Search Component the app provides a 'live' search feature, where users can open files and folders directly from the Search API results.
If you type Enter in the text input area, you are going to see Search Results page
with advanced filtering and faceted search.
Current User - displays the user's name, and a menu where users can logout. Optionally through updating the app.config.json a language switching menu can be displayed.
The application side navigation has two features: a button menu and navigation links.
The New button displays a menu which provides three actions:
- Create a new folder - provides a dialog which allows the creation of a new folder, the folder name is mandatory and the description is optional.
- Upload a file - invokes the operating system file browser and allows a user to select file(s) to upload into their current location in the content repository.
- Upload a folder - invokes the operating system folder browser and allows a user to select a folder to upload to their current location in the content repository.
When an upload starts the upload component is displayed which shows the user the progress of the uploads they have started. The upload dialog persists on the screen and can be minimized; users are able to continue using the application whilst uploads are in progress and uploads can be canceled which will stop uploads in progress or permanently delete already completed uploads.
The navigation links are configurable via the app.config.json. Default configuration creates two sections. See Navigation for more information about configuring the side navigation.
The main area of the application is composed of several individual ADF components:
- (1) Breadcrumb
- (2) Toolbar
- (3) Document List
- (4) Pagination
The application has seven different Document List views which share commonalities between each view and subtle differences depending on the content being loaded which are explained below.
Personal Files retrieves all content from the logged in user's home area (/User Homes/<username>/) in the repository;
if the user is ‘admin’ who does not have a home folder then the repository root folder is shown.
Personal Files is the Files component, using the Nodes API.
File Libraries retrieves all the sites that the user is a member of including what type of site it is: public, moderated or private. File Libraries is the Libraries component, using the Sites API.
When a user opens one of their sites then the content for the site's document library is shown.
To display the files and folders from a site (/Sites/<siteid>/Document Library/) the Files component,
using the Nodes API is used.
The Shared Files view aggregates all files that have been shared using the QuickShare feature in the content repository. The Shared Files component uses the shared-links API and includes extra columns to display where the file is located in the content repository and who created the shared link.
A feature for creating and removing Shared Links will be added in the future.
The Recent Files view shows all the files that have been created or modified within the last 30 days by the current user. The Recent Files component uses the Search API to query SOLR for changes made by the user and includes an extra column to display where the file is located in the content repository.
The Favorites view shows all files and folders from the content repository that have been marked as a favorite by the current user. The Favorites component uses the favorites API to retrieve all the favorite nodes for the user and includes an extra column to display where the file is located in the content repository.
The Trash view shows all the items that a user has deleted, admin will see items deleted by all users. The actions available in this view are Restore and Permanently Delete. The Trashcan component uses the trashcan API to retrieve the deleted items and perform the actions requested by the user and includes an extra column to display where the item was located in the content repository before it was deleted.
The Search Results view shows the found items for a search query. It has a custom layout template and users can easily browse the results and perform actions on items. For more information on the SearchComponent, please also check this Search Results section.
All the views incorporate the toolbar component from the Alfresco Application Development Framework.
Actions are displayed in the toolbar when item(s) are selected, or a right click is performed; apart from the Trash view they all display the following actions when the current user has the necessary permissions, actions are automatically hidden when the user does not have permission.
| Action | File | Folder |
|---|---|---|
| View | Opens the selected file using the Preview component, where the file cannot be displayed natively in a browser a PDF rendition is obtained from the repository. | Not applicable |
| Download | Downloads single files to the user's computer, when multiple files are selected they are compressed into a ZIP and then downloaded. | Folders are automatically compressed into a ZIP and then downloaded to the user's computer. |
| Edit | Not applicable | The folder name and description can be edited in a dialog. |
| Favorite | Toggle the favorite mark on or off for files and folders, when multiple items are selected and one or more are not favorites then the mark will be toggled on. | |
| Copy | Files and folders can be copied to another location in the content repository using the content-node-selector component; once the copy action has completed the user is notified and can undo the action (which permanently deletes the created copies). | |
| Move | Files and folders can be moved to another location in the content repository using the content-node-selector component; once the move action has completed the user is notified and can undo the action (which moves the items back to the original location). | |
| Share | Create and copy a link to a file that can be shared, the links are accessible without granting permissions to the file, and do not require users to login to the application. | Not applicable. |
| Delete | Files and folders can be deleted from their location in the content repository; once the delete action has completed the user is notified and can undo the action (which restores the items from the trash). | |
| Manage Versions | Versions of files can be viewed, uploaded, restored, downloaded and deleted by using the version manager dialog; once each action has completed the list of versions is updated according to the change. | Not applicable |
| Permissions | Permissions on a file can be adjusted as required in a number of ways; disable inheritance from the parent folder, change a user or groups role and grant users/groups access. | Not available |
Besides the actions available in the toolbar users can
- single click on a file to view it, and a folder to open it
- single click an item to select it
- double click on a file to view it, and a folder to open it
The File Viewer has been created using the ViewerComponent from the ADF. The Viewer has four main areas:
The Header & Toolbar section of the viewer contains a number of features that relate to the file currently being displayed:
- Close 'X' will return the user to the folder that contains the file.
- The name and file type icon is shown in the middle.
- Next and previous buttons will be displayed either side of the file name so that users can navigate to other files in the folder without navigating away from the viewer.
- Finally, on the right hand side an actions toolbar provides users with the ability to download, favorite, move, copy, delete, manage versions and view info panel.
The File Viewer consists of four separate views that handle displaying the content based on four types of content, covering various file/mime types:
- Document View: PDF files are displayed in the application File Viewer, for other document types (DOCX etc) then a PDF rendition is automatically retrieved.
- Image View: JPEG, PNG, GIF, BMP and SVG images are natively displayed in the application File Viewer.
- Media View: MP4, MP3, WAV, OGG and WEBM files are played natively application File Viewer. The File Viewer will download, by default, 50MB of the content at a time to ensure a smooth playback of the content.
- Text View: TXT, XML, JS, HTML, JSON and TS files are natively displayed as text in the application File Viewer.
The Document View includes a thumbnails pane which can be activated by a button in the Viewer Actions toolbar. Clicking on a thumbnail will take a user directly to the selected page and as users scroll through a document the current page is highlighted in the pane.
At the bottom of the content the Viewer Controls allow users to interact with the content in various ways; the actions available are dependant on the type of content being displayed.
- Document View:
- Activate/Deactivate thumbnails pane
- Previous/Next page
- Jump to page number
- Zoom in/out
- Fit to page
- Image View:
- Zoom in/out
- Rotate left/right (does not alter content in the repository)
- Reset image
- Media View:
- Play/pause
- Timeline position
- Toggle audio
- Audio volume
- Full screen
The Info Drawer displays node information in the right sidebar panel. It is created by using the InfoDrawerComponent. This info is available for both folder and file nodes.
Currently, there are 2 tabs available: Properties and Versions.
The Properties tab displays the node's metadata info by using the ContentMetadataCardComponent.
For more information, please check also the ContentMetadataComponent.
The Comments tab displays all comments made on the selected node in the respoistory by using the CommentsComponent. Users can post new comments that will be displayed immediately.
The versions of a file can be viewed & managed by using the VersionManagerComponent.
There are 2 ways users can access the Version Manager:
- From the 'Manage Versions' option of the 'More actions' menu (check Actions and the Actions Toolbar):
- From the Info Drawer (the Details right panel):
A new version for the selected file can be added by using this button. Users can upload a new file version using a file that is does not have the same name, or mime type as the current version, whilst allowing the user to choose the type of version (minor or major) and inputting supporting comments.
Please also check the UploadVersionButtonComponent.
Each item in the version list has a couple of actions available: Restore, Download and Delete. These are displayed if user has permission to do that specific action. The 'Download' and 'Delete' can be also disabled from the app.config.
In the app.config.json file, these are the current settings for the ACA version manager:
{
"adf-version-manager": {
"allowComments": true,
"allowDownload": true
}
}Set the allowComments to false if the version comments should not be displayed on the version list.
Clicking to delete a version of a file triggers a confirmation dialog. Please see the ConfirmDialogComponent for more info.
Once you type the text in the Search Input component and press Enter you are going to see the Search Results page
This page consists of the following ADF components:
- Search Filter
- Search Chip List
- Search Sorting Picker
- Document List with custom layout template
- Info Drawer with Metadata and Version Management
- Toolbar with basic actions like
Preview,Download,Favorite,Copy, etc.
And also the Info Drawer, Toolbar and Node Selector dialogs for copy and move operations.
Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing and then check out one of our issues in the Jira or GitHub
The time necessary for a code review will vary, smaller changes may be reviewed within days, while larger changes may take longer.