Hyland Community
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Alfresco Web Component Samples

alfresco
Elite Collaborator
Elite Collaborator
‎08-31-2016 12:39 PM

All the Angular2 based Alfresco web components can be found in the following GitHub project:https://github.com/Alfresco/alfresco-ng2-components

Each component, such as the datatable, has its own sample that demonstrates the use of it.

Datatable

Description: The datatable component can be used to display arbitrary data in a table:

 

 

Detailed component information: http://devproducts.alfresco.com/components/ng2-alfresco-datatable

Component source code: https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-datatabl...

Sample/Demo source code: https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-datatabl...

How to run sample (note. does not require the Alfresco server to be running):

  1. Git clone the https://github.com/Alfresco/alfresco-ng2-components project.
  2. Cd into the ng2-alfresco-datatable/demo directory
  3. npm install
  4. npm start

 

Alternative way to build and start demo (step 3-4) if above instructions does not work (sudo might be needed on linux):

 

  1. npm install (get all the packages)
  2. tsc (compile the demo)
  3. npm run server (start the server)

Document List

Description: The document list component can be used to display content node metadata in a list. Each row in the list has a number of columns representing a content node’s metadata:

 

 

Detailed component information: http://devproducts.alfresco.com/components/ng2-alfresco-documentlist  

Component source code: https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-document...  

Sample/Demo source code: https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-document...  

How to run sample:

  1. Make sure you have an Alfresco Platform 5.2.a or newer running
  2. Git clone the https://github.com/Alfresco/alfresco-ng2-components project.
  3. Cd into the ng2-alfresco-documentlist/demo directory
  4. Update Alfresco Host and Login Credentials: in the demo/src/main.ts file (By default it is 127.0.0.1 and admin/admin - can also be set when running the demo)
  5. npm install
  6. npm start

 

Alternative way to build and start demo (step 5-6) if above instructions does not work (sudo might be needed on linux):

 

  1. npm install (get all the packages)
  2. tsc (compile the demo)
  3. npm run server (start the server)

Login

Description: The login component is used to provide an Alfresco Platform login dialog:

 

Detailed component information: http://devproducts.alfresco.com/components/ng2-alfresco-login   

Component source code: https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-login   

Sample/Demo source code: https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-login/de...   

How to run sample:

  1. Make sure you have an Alfresco Platform 5.2.a or newer running
  2. Git clone the https://github.com/Alfresco/alfresco-ng2-components project.
  3. Cd into the ng2-alfresco-login/demo directory
  4. Specify Alfresco Host that you want to authenticate with: in the demo/src/main.ts file (also possible to set when running the demo)
  5. npm install
  6. npm start

 

Alternative way to build and start demo (step 5-6) if above instructions does not work (sudo might be needed on linux):

 

  1. npm install (get all the packages)
  2. tsc (compile the demo)
  3. npm run server (start the server)

Search

Description: The search component is actually two components: Search Control, which displays a search box where the user can enter a query, and Search Result, which displays the search result from that query.

 

Instant search via Search Control:

 

 

Search Result screen:

 

 

Detailed component information: http://devproducts.alfresco.com/components/ng2-alfresco-search    

Component source code: https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-search   

Sample/Demo source code: https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-search/d...    

How to run sample:

  1. Make sure you have an Alfresco Platform 5.2.a or newer running
  2. Git clone the https://github.com/Alfresco/alfresco-ng2-components project.
  3. Cd into the ng2-alfresco-search/demo directory
  4. Update Alfresco Host and Login Credentials: in the demo/src/main.ts file
  5. npm install
  6. npm start

 

Alternative way to build and start demo (step 5-6) if above instructions does not work (sudo might be needed on linux):

 

  1. npm install (get all the packages)
  2. tsc (compile the demo)
  3. npm run server (start the server)

Upload

Description: The upload component can be used to provide a button for a file upload dialog. It actually consist of two components: Upload Button and Drag and Drop, depending on what the user prefers and what you want to provide:

 

 

Detailed component information: http://devproducts.alfresco.com/components/ng2-alfresco-upload     

Component source code: https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-upload    

Sample/Demo source code: https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-upload/d...      

How to run sample:

  1. Make sure you have an Alfresco Platform 5.2.a or newer running
  2. Git clone the https://github.com/Alfresco/alfresco-ng2-components project.
  3. Cd into the ng2-alfresco-upload/demo directory
  4. Update Alfresco Host and Login Credentials: in the demo/src/main.ts file
  5. npm install
  6. npm start

 

Alternative way to build and start demo (step 5-6) if above instructions does not work (sudo might be needed on linux):

 

  1. npm install (get all the packages)
  2. tsc (compile the demo)
  3. npm run server (start the server)

Viewer

Description: The viewer component provides file previews:

 

 

Detailed component information: http://devproducts.alfresco.com/components/ng2-alfresco-viewer      

Component source code: https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-viewer     

Sample/Demo source code: https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-viewer/d...       

How to run sample (note. does not require the Alfresco server to be running):  

  1. Git clone the https://github.com/Alfresco/alfresco-ng2-components project.
  2. Cd into the ng2-alfresco-viewer/demo directory
  3. npm install
  4. npm start

 

Alternative way to build and start demo (step 3-4) if above instructions does not work (sudo might be needed on linux):

 

  1. npm install (get all the packages)
  2. tsc (compile the demo)
  3. npm run server (start the server)
Copyright © 2024 Khoros, LLC