mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
Insights dependency and documentation improvements (#9815)
This commit is contained in:
Denys Vuika
GitHub
parent
c7592c561e
commit
04f82fac34
@ -578,21 +578,19 @@ for more information about installing and using the source code.
|
|||||||
## Insights API
|
## Insights API
|
||||||
|
|
||||||
Contains components for Process Services analytics and diagrams.
|
Contains components for Process Services analytics and diagrams.
|
||||||
See the library's
|
See the library [README](../lib/insights/README.md) for more details.
|
||||||
[README file](../lib/insights/README.md)
|
|
||||||
for more information about installing and using the source code.
|
|
||||||
|
|
||||||
<!--insights start-->
|
<!--insights start-->
|
||||||
|
|
||||||
### Components
|
### Components
|
||||||
|
|
||||||
| Name | Description | Source link |
|
| Name | Description |
|
||||||
| ---- | ----------- | ----------- |
|
|----------------------------------------------------------------------------------------|----------------------------------------------------------|
|
||||||
| [Analytics Generator Component](insights/components/analytics-generator.component.md) | Generates and shows charts | [Source](../lib/insights/src/lib/analytics-process/components/analytics-generator.component.ts) |
|
| [Analytics Generator Component](insights/components/analytics-generator.component.md) | Generates and shows charts |
|
||||||
| [APS Analytics List Component](insights/components/analytics-report-list.component.md) | Shows a list of all available reports | [Source](../lib/insights/src/lib/analytics-process/components/analytics-report-list.component.ts) |
|
| [APS Analytics List Component](insights/components/analytics-report-list.component.md) | Shows a list of all available reports |
|
||||||
| [APS Analytics Component](insights/components/analytics.component.md) | Shows the charts related to the reportId passed as input | [Source](../lib/insights/src/lib/analytics-process/components/analytics.component.ts) |
|
| [APS Analytics Component](insights/components/analytics.component.md) | Shows the charts related to the reportId passed as input |
|
||||||
| [Diagram Component](insights/components/diagram.component.md) | Displays process diagrams. | [Source](../lib/insights/src/lib/diagram/components/diagram.component.ts) |
|
| [Diagram Component](insights/components/diagram.component.md) | Displays process diagrams. |
|
||||||
| [Widget component](insights/components/widget.component.md) | Base class for standard and custom widget classes. | [Source](../lib/insights/src/lib/analytics-process/components/widgets/widget.component.ts) |
|
| [Widget component](core/services/widget.component.md) | Base class for standard and custom widget classes. |
|
||||||
|
|
||||||
<!--insights end-->
|
<!--insights end-->
|
||||||
|
|
||||||
|
|||||||
@ -7,7 +7,7 @@ Last reviewed: 2018-11-20
|
|||||||
|
|
||||||
# [Form Rendering service](../../../lib/core/src/lib/form/services/form-rendering.service.ts "Defined in form-rendering.service.ts")
|
# [Form Rendering service](../../../lib/core/src/lib/form/services/form-rendering.service.ts "Defined in form-rendering.service.ts")
|
||||||
|
|
||||||
Maps a form field type string onto the corresponding form [widget component](../../insights/components/widget.component.md) type.
|
Maps a form field type string onto the corresponding form [widget component](widget.component.md) type.
|
||||||
|
|
||||||
## Class members
|
## Class members
|
||||||
|
|
||||||
|
|||||||
42
docs/core/services/widget.component.md
Normal file
42
docs/core/services/widget.component.md
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
# Widget Component
|
||||||
|
|
||||||
|
Base class for all standard and custom form widgets. All widgets must extend this class.
|
||||||
|
|
||||||
|
## Basic Usage
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { WidgetComponent } from '@alfresco/adf-core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'custom-editor',
|
||||||
|
template: `
|
||||||
|
<div style="color: red">Look, I'm a custom editor!</div>
|
||||||
|
`
|
||||||
|
})
|
||||||
|
export class CustomEditorComponent extends WidgetComponent {}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Class members
|
||||||
|
|
||||||
|
### Properties
|
||||||
|
|
||||||
|
| Name | Type | Default value | Description |
|
||||||
|
|-------|-------|---------------|-------------|
|
||||||
|
| field | `any` | | field. |
|
||||||
|
|
||||||
|
### Events
|
||||||
|
|
||||||
|
| Name | Type | Description |
|
||||||
|
|--------------|---------------------|---------------|
|
||||||
|
| fieldChanged | `EventEmitter<any>` | fieldChanged. |
|
||||||
|
|
||||||
|
## Details
|
||||||
|
|
||||||
|
The `WidgetComponent` is the base class for all standard and custom form widgets.
|
||||||
|
See the [Form Extensibility and Customisation](../../user-guide/extensibility.md) page for full details about
|
||||||
|
implementing custom widgets.
|
||||||
|
|
||||||
|
## See also
|
||||||
|
|
||||||
|
- [Extensibility](../../user-guide/extensibility.md)
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@ -1,60 +0,0 @@
|
|||||||
---
|
|
||||||
Title: Getting started (as developer) with Alfresco ADF-based applications
|
|
||||||
Level: Basic
|
|
||||||
---
|
|
||||||
|
|
||||||
# Prerequisites and requirements
|
|
||||||
|
|
||||||
The first thing to do is to check the prerequisites and the requirements to run the front-end application directly into a development environment.
|
|
||||||
|
|
||||||
More in particular check that you have:
|
|
||||||
|
|
||||||
- Alfresco Content Services (alias ACS) Community or Enterprise edition up and running (identify the URL that will be required as configuration).
|
|
||||||
- The latest lts version of NodeJs.
|
|
||||||
- A recent (and supported) version of a browser (see here for further details).
|
|
||||||
|
|
||||||
# Cloning and launching the front-end application
|
|
||||||
|
|
||||||
Once the environment is properly configured, open a terminal and clone the following GitHub repository in a working folder.
|
|
||||||
|
|
||||||
`git clone https://github.com/Alfresco/alfresco-content-app.git`
|
|
||||||
|
|
||||||
Once done, enter the alfresco-content-app folder and create a file named .env with the following content (put the ACS URL as value).
|
|
||||||
|
|
||||||
`API_CONTENT_HOST="https://..."`
|
|
||||||
|
|
||||||
Run `npm install` and then `npm start` to get the application up and running. The application will be available at the URL <http://localhost:4200> and the credentials are the ones required by ACS.
|
|
||||||
|
|
||||||
Congratulations! You now have the Alfresco Content App running in development mode into your development environment.
|
|
||||||
|
|
||||||
# Troubleshooting and support
|
|
||||||
|
|
||||||
If you have any issue, don’t worry! There is an entire community available to help you.
|
|
||||||
|
|
||||||
In case of problems raise a question into the [Alfresco Forum](https://hub.alfresco.com/ "https://hub.alfresco.com/") (Application Development Framework section) or connect with the developers into the [Alfresco Gitter channel](https://alfresco.atlassian.net/wiki/spaces/PM/overview "https://alfresco.atlassian.net/wiki/spaces/PM/overview").
|
|
||||||
|
|
||||||
# Bonus: Use the Enterprise stack instead of the Open Source
|
|
||||||
|
|
||||||
If you are an Alfresco Customer or an Official Partner, you might be interested in using the Enterprise stack instead of the Open Source introduced above. The changes to the tasks are not too many and you can try to do the same exercise with the following changes.
|
|
||||||
|
|
||||||
- Use ACS Enterprise Edition instead of the Community Edition.
|
|
||||||
- Use the `alfresco-digital-workspace-app` GitHub repository (this is a private repository so you may require to get a local copy of the project raising a request into the Alfresco Support Portal).
|
|
||||||
- Use the following `.env` file.
|
|
||||||
|
|
||||||
AUTH_TYPE="BASIC"
|
|
||||||
PROVIDER="ECM"
|
|
||||||
API_CONTENT_HOST="<https://...>"
|
|
||||||
API_PROCESS_HOST="<https://...>"
|
|
||||||
OAUTH_HOST="<https://.../auth/realms/alfresco>"
|
|
||||||
E2E_HOST="<http://localhost:4200>"
|
|
||||||
ADMIN_EMAIL="..."
|
|
||||||
ADMIN_PASSWORD="..."
|
|
||||||
ADF_PATH="../alfresco-ng2-components"
|
|
||||||
ACA_BRANCH="develop"
|
|
||||||
MAXINSTANCES=3
|
|
||||||
|
|
||||||
- Run the application using `npm start content-ee`.
|
|
||||||
|
|
||||||
# Conclusion
|
|
||||||
|
|
||||||
In this tutorial you learned how to launch a fully-featured ADF-based application on your development environment, starting from the source code, with the purpose to have a first experience with the development principles and the best practices suggested to create front-end applications working on top of the Alfresco backend services. This is only the first success that you can do with the Alfresco technology. Continue to learn on how to develop front-end applications using Alfresco, in the following sections of the official documentation.
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
---
|
|
||||||
Title: Analytics Generator Component
|
|
||||||
Added: v2.0.0
|
|
||||||
Status: Active
|
|
||||||
---
|
|
||||||
|
|
||||||
# [Analytics Generator Component](../../../lib/insights/src/lib/analytics-process/components/analytics-generator.component.ts "Defined in analytics-generator.component.ts")
|
|
||||||
|
|
||||||
Generates and shows charts
|
|
||||||
|
|
||||||
## Basic Usage
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-analytics-generator
|
|
||||||
[reportId]="reportId"
|
|
||||||
[reportParamQuery]="reportParamQuery">
|
|
||||||
</adf-analytics>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Class members
|
|
||||||
|
|
||||||
### Properties
|
|
||||||
|
|
||||||
| Name | Type | Default value | Description |
|
|
||||||
| ---- | ---- | ------------- | ----------- |
|
|
||||||
| reportId | `string` | | reportId. |
|
|
||||||
| reportParamQuery | [`ReportQuery`](../../../lib/insights/src/lib/diagram/models/report/report-query.model.ts) | undefined | reportParamQuery. |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Name | Type | Description |
|
|
||||||
| ---- | ---- | ----------- |
|
|
||||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | error. |
|
|
||||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | success. |
|
|
||||||
1
docs/insights/components/analytics-generator.component.md
Symbolic link
1
docs/insights/components/analytics-generator.component.md
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
../../../lib/insights/docs/components/analytics-generator.component.md
|
||||||
@ -1,35 +0,0 @@
|
|||||||
---
|
|
||||||
Title: APS Analytics List Component
|
|
||||||
Added: v2.0.0
|
|
||||||
Status: Active
|
|
||||||
---
|
|
||||||
|
|
||||||
# [APS Analytics List Component](../../../lib/insights/src/lib/analytics-process/components/analytics-report-list.component.ts "Defined in analytics-report-list.component.ts")
|
|
||||||
|
|
||||||
Shows a list of all available reports
|
|
||||||
|
|
||||||
## Basic Usage
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-analytics-report-list
|
|
||||||
[layoutType]="'LIST'">
|
|
||||||
</adf-analytics-report-list>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Class members
|
|
||||||
|
|
||||||
### Properties
|
|
||||||
|
|
||||||
| Name | Type | Default value | Description |
|
|
||||||
| ---- | ---- | ------------- | ----------- |
|
|
||||||
| appId | `number` | | appId ID of the target app. |
|
|
||||||
| layoutType | `string` | LAYOUT_LIST | layout Type LIST or GRID. |
|
|
||||||
| selectFirst | `boolean` | false | selectFirst. |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Name | Type | Description |
|
|
||||||
| ---- | ---- | ----------- |
|
|
||||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | error. |
|
|
||||||
| reportClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ReportParametersModel`](../../../lib/insights/src/lib/diagram/models/report/report-parameters.model.ts)`>` | report Click. |
|
|
||||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | success. |
|
|
||||||
1
docs/insights/components/analytics-report-list.component.md
Symbolic link
1
docs/insights/components/analytics-report-list.component.md
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
../../../lib/insights/docs/components/analytics-report-list.component.md
|
||||||
@ -1,38 +0,0 @@
|
|||||||
---
|
|
||||||
Title: APS Analytics Component
|
|
||||||
Added: v2.0.0
|
|
||||||
Status: Active
|
|
||||||
---
|
|
||||||
|
|
||||||
# [APS Analytics Component](../../../lib/insights/src/lib/analytics-process/components/analytics.component.ts "Defined in analytics.component.ts")
|
|
||||||
|
|
||||||
Shows the charts related to the reportId passed as input
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Basic Usage
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-analytics
|
|
||||||
[appId]="1001"
|
|
||||||
[reportId]="2006">
|
|
||||||
</adf-analytics>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Class members
|
|
||||||
|
|
||||||
### Properties
|
|
||||||
|
|
||||||
| Name | Type | Default value | Description |
|
|
||||||
| ---- | ---- | ------------- | ----------- |
|
|
||||||
| appId | `number` | | appId ID of the target app. |
|
|
||||||
| hideParameters | `boolean` | false | hideParameters. |
|
|
||||||
| reportId | `string` | | reportId. |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Name | Type | Description |
|
|
||||||
| ---- | ---- | ----------- |
|
|
||||||
| editReport | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | emitted when editReport. |
|
|
||||||
| reportDeleted | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | emitted when reportDeleted. |
|
|
||||||
| reportSaved | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | emitted when reportSaved. |
|
|
||||||
1
docs/insights/components/analytics.component.md
Symbolic link
1
docs/insights/components/analytics.component.md
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
../../../lib/insights/docs/components/analytics.component.md
|
||||||
@ -1,48 +0,0 @@
|
|||||||
---
|
|
||||||
Title: Diagram Component
|
|
||||||
Added: v2.0.0
|
|
||||||
Status: Active
|
|
||||||
---
|
|
||||||
|
|
||||||
# [Diagram Component](../../../lib/insights/src/lib/diagram/components/diagram.component.ts "Defined in diagram.component.ts")
|
|
||||||
|
|
||||||
Displays process diagrams.
|
|
||||||
|
|
||||||
## Basic Usage
|
|
||||||
|
|
||||||
This component shows the diagram of a process.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-diagram
|
|
||||||
[processDefinitionId]="processDefinitionId">
|
|
||||||
</adf-diagram>
|
|
||||||
```
|
|
||||||
|
|
||||||
The below component shows the diagram of a running process instance with the activities highlighted according to their state (Active/Completed/Pending).
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-diagram
|
|
||||||
[processInstanceId]="processInstanceId">
|
|
||||||
</adf-diagram>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Class members
|
|
||||||
|
|
||||||
### Properties
|
|
||||||
|
|
||||||
| Name | Type | Default value | Description |
|
|
||||||
| ---- | ---- | ------------- | ----------- |
|
|
||||||
| height | `number` | 500 | height. |
|
|
||||||
| metricColor | `any` | | metricColor. |
|
|
||||||
| metricPercentages | `any` | | metricPercentages. |
|
|
||||||
| metricType | `string` | "" | metricType. |
|
|
||||||
| processDefinitionId | `any` | | processDefinitionId. |
|
|
||||||
| processInstanceId | `any` | | processInstanceId. |
|
|
||||||
| width | `number` | 1000 | width. |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Name | Type | Description |
|
|
||||||
| ---- | ---- | ----------- |
|
|
||||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | error. |
|
|
||||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | success. |
|
|
||||||
1
docs/insights/components/diagram.component.md
Symbolic link
1
docs/insights/components/diagram.component.md
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
../../../lib/insights/docs/components/diagram.component.md
|
||||||
@ -1,49 +0,0 @@
|
|||||||
---
|
|
||||||
Title: Widget component
|
|
||||||
Added: v2.0.0
|
|
||||||
Status: Active
|
|
||||||
Last reviewed: 2018-03-29
|
|
||||||
---
|
|
||||||
|
|
||||||
# [Widget component](../../../lib/insights/src/lib/analytics-process/components/widgets/widget.component.ts "Defined in widget.component.ts")
|
|
||||||
|
|
||||||
Base class for standard and custom [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) classes.
|
|
||||||
|
|
||||||
## Basic Usage
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { Component } from '@angular/core';
|
|
||||||
import { WidgetComponent } from '@alfresco/adf-core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'custom-editor',
|
|
||||||
template: `
|
|
||||||
<div style="color: red">Look, I'm a custom editor!</div>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class CustomEditorComponent extends WidgetComponent {}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Class members
|
|
||||||
|
|
||||||
### Properties
|
|
||||||
|
|
||||||
| Name | Type | Default value | Description |
|
|
||||||
| ---- | ---- | ------------- | ----------- |
|
|
||||||
| field | `any` | | field. |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Name | Type | Description |
|
|
||||||
| ---- | ---- | ----------- |
|
|
||||||
| fieldChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | fieldChanged. |
|
|
||||||
|
|
||||||
## Details
|
|
||||||
|
|
||||||
The [Widget component](widget.component.md) is the base class for all standard and custom form widgets. See the
|
|
||||||
[Form Extensibility and Customisation](../../user-guide/extensibility.md) page for full details about
|
|
||||||
implementing custom widgets.
|
|
||||||
|
|
||||||
## See also
|
|
||||||
|
|
||||||
- [Extensibility](../../user-guide/extensibility.md)
|
|
||||||
@ -9,8 +9,6 @@ Github only: true
|
|||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
| [**Prerequisites and the requirements**](creating-your-first-adf-application.md) | Basic | In this tutorial you are going to learn how to create a very basic (and almost “empty”) ADF-based application that you can start enriching with features, behaviors and customizations. The creation of this basic ADF-based application is possible through a scaffolding tool called [Yeoman]\(https://yeoman.io/ "https://yeoman.io/"), which makes this task very straightforward. |
|
| [**Prerequisites and the requirements**](creating-your-first-adf-application.md) | Basic | In this tutorial you are going to learn how to create a very basic (and almost “empty”) ADF-based application that you can start enriching with features, behaviors and customizations. The creation of this basic ADF-based application is possible through a scaffolding tool called [Yeoman]\(https://yeoman.io/ "https://yeoman.io/"), which makes this task very straightforward. |
|
||||||
| [**Creating your Alfresco JavaScript application**](creating-javascript-app-using-alfresco-js-api.md) | Basic | In this tutorial you will learn how to create an application in JavaScript from scratch to interact with Alfresco. |
|
| [**Creating your Alfresco JavaScript application**](creating-javascript-app-using-alfresco-js-api.md) | Basic | In this tutorial you will learn how to create an application in JavaScript from scratch to interact with Alfresco. |
|
||||||
| [**Adding a new component**](new-component.md) | Basic | In this tutorial, you will learn how to create a component using [Angular CLI](https://cli.angular.io/) within an existing application. |
|
|
||||||
| [**Adding a new view**](new-view.md) | Beginner | In this tutorial you will learn how to create a new view in your application and how to access it using a defined endpoint. |
|
|
||||||
| [**Using ADF Components**](using-components.md) | Basic | In this tutorial, you will learn how to extend, use, and configure ADF Components. |
|
| [**Using ADF Components**](using-components.md) | Basic | In this tutorial, you will learn how to extend, use, and configure ADF Components. |
|
||||||
| [**Basic theming**](basic-theming.md) | Beginner | In this tutorial you will see how to theme an ADF app by modifying the CSS. |
|
| [**Basic theming**](basic-theming.md) | Beginner | In this tutorial you will see how to theme an ADF app by modifying the CSS. |
|
||||||
| [**Working with a Data Table**](working-with-data-table.md) | Intermediate | In this tutorial you will learn how to populate a DataTable component. |
|
| [**Working with a Data Table**](working-with-data-table.md) | Intermediate | In this tutorial you will learn how to populate a DataTable component. |
|
||||||
|
|||||||
@ -1,62 +0,0 @@
|
|||||||
---
|
|
||||||
Title: Adding a new component
|
|
||||||
Level: Basic
|
|
||||||
---
|
|
||||||
|
|
||||||
# Adding a new component
|
|
||||||
|
|
||||||
In this tutorial, you will learn how to create a component using [Angular CLI](https://cli.angular.io/) within an existing application.
|
|
||||||
|
|
||||||
By definition, a _component_ controls a patch of screen called a _view_. For example, individual components define and control menus, tabs, forms, buttons and every simple or complex portion of an application's layout.
|
|
||||||
|
|
||||||
## Creating a component
|
|
||||||
|
|
||||||
Starting from the root of your project, run the following command in a terminal:
|
|
||||||
|
|
||||||
ng generate component my-first-component
|
|
||||||
|
|
||||||
If you are adding the component to an application with more than one module, you might want to specify it using the `--module` parameter. For example use `--module app` to add the new component to the root app of your application.
|
|
||||||
|
|
||||||
## Using the component
|
|
||||||
|
|
||||||
Once the component is created, you can use the element
|
|
||||||
|
|
||||||
```html
|
|
||||||
<app-my-first-component></app-my-first-component>
|
|
||||||
```
|
|
||||||
|
|
||||||
anywhere within the HTML file of another component to render the content of `my-first-component`.
|
|
||||||
|
|
||||||
As an example, add `<app-my-first-component></app-my-first-component>` at the top of the
|
|
||||||
[`app.component`](../../demo-shell/src/app/app.component.ts)`.html` file in the `src` folder, and run the application again. In the browser you will
|
|
||||||
shortly see the text "my-first-component works!", as a placeholder to show where the component is
|
|
||||||
rendered in the layout.
|
|
||||||
|
|
||||||
## Anatomy of the component
|
|
||||||
|
|
||||||
By default the new component is created in the `src/app` path and everything is stored in a folder with the
|
|
||||||
same name as the component itself. Here, you should find a folder named `my-first-component` has been added
|
|
||||||
to `src/app`, with the following contents:
|
|
||||||
|
|
||||||
- `my-first-component.component.scss` containing the CSS used by the component, initially empty.
|
|
||||||
- `my-first-component.component.html` containing the HTML used to render the component. This file is
|
|
||||||
created with a very basic placeholder message that displays the name of the component within a `p` tag.
|
|
||||||
- `my-first-component.component.spec.ts` containing the unit tests for the component.
|
|
||||||
- `my-first-component.component.ts` containing the `MyFirstComponentComponent` class that implements the
|
|
||||||
business logic in typescript.
|
|
||||||
|
|
||||||
You must declare or import the component in one or more modules in order to use it. In this example the
|
|
||||||
`app.module.ts` file stored in `src/app` contains the following code:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { MyFirstComponentComponent } from './my-first-component/my-first-component.component';
|
|
||||||
|
|
||||||
@NgModule({
|
|
||||||
declarations: [
|
|
||||||
...
|
|
||||||
MyFirstComponentComponent
|
|
||||||
],
|
|
||||||
```
|
|
||||||
|
|
||||||
These is the most basic information you need to know about your component. Everything mentioned here is
|
|
||||||
standard Angular code without anything specific to ADF applications.
|
|
||||||
@ -1,138 +0,0 @@
|
|||||||
---
|
|
||||||
Title: Adding a new view
|
|
||||||
Level: Beginner
|
|
||||||
---
|
|
||||||
|
|
||||||
# Adding a new view
|
|
||||||
|
|
||||||
In this tutorial you will learn how to create a new view in your application and how to access it using a defined endpoint.
|
|
||||||
|
|
||||||
Every application developed in Angular is a single page application where the concepts of *view* and *routing* play a key role in the user experience. Being a single page application, the navigation between the different layouts (called *views*) is enabled through the *routing*.
|
|
||||||
|
|
||||||
## Creating a view
|
|
||||||
|
|
||||||
In an Angular application, a view is implemented by a regular component. A view can use other views
|
|
||||||
(ie, other components) but a view can also be used to implement the full layout of your application.
|
|
||||||
This is the reason why creating a view is not necessarily the same task as creating a component.
|
|
||||||
|
|
||||||
To create a view, run the following command in a terminal from the root of your project:
|
|
||||||
|
|
||||||
ng generate component my-first-view
|
|
||||||
|
|
||||||
For further details about creating a component, refer to the tutorial [here](new-component.md).
|
|
||||||
|
|
||||||
## Routing the view
|
|
||||||
|
|
||||||
An Angular application has one singleton instance of the `Router` service that is used to match the browser's URL with the corresponding component to display. The `Router` service must be configured in a Typescript file with a syntax similar to the following source code.
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { Routes, RouterModule } from '@angular/router';
|
|
||||||
|
|
||||||
const appRoutes: Routes = [
|
|
||||||
{ path: 'path-in-the-app', component: ExistingComponent },
|
|
||||||
{ path: '**', component: PageNotFoundComponent }
|
|
||||||
];
|
|
||||||
|
|
||||||
@NgModule({
|
|
||||||
imports: [
|
|
||||||
RouterModule.forRoot(
|
|
||||||
appRoutes,
|
|
||||||
{ enableTracing: true } // <-- debugging purposes only.
|
|
||||||
)
|
|
||||||
// other imports here
|
|
||||||
],
|
|
||||||
...
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
To add the new view to the routing, change the `appRoutes` constant as follows:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const appRoutes: Routes = [
|
|
||||||
{ path: 'path-in-the-app', component: ExistingComponent },
|
|
||||||
{ path: 'my-first-view', component: MyFirstViewComponent }, // <-- Add this!
|
|
||||||
{ path: '**', component: PageNotFoundComponent }
|
|
||||||
];
|
|
||||||
```
|
|
||||||
|
|
||||||
And remember to import the component in the same file with the following syntax.
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { MyFirstViewComponent } from './my-first-view/my-first-view.component';
|
|
||||||
```
|
|
||||||
|
|
||||||
Be aware that the `Router` service can be declared in a file that can be stored in different places in the application's structure. Usually, the `Router` service is declared in a location close to the file containing
|
|
||||||
the root module.
|
|
||||||
|
|
||||||
## Testing the view
|
|
||||||
|
|
||||||
To render the new view through the application and check the user experience, restart the application and open a browser at the following URL:
|
|
||||||
|
|
||||||
http://<ip_address>:<port>/my-first-view
|
|
||||||
|
|
||||||
The result should be a very simple page with the following content.
|
|
||||||
|
|
||||||
my-first-view works!
|
|
||||||
|
|
||||||
## View parameters (optional)
|
|
||||||
|
|
||||||
In most use cases, you will want to add parameters to the view's endpoint. To enable this, change the `appRoutes` constant as follows:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const appRoutes: Routes = [
|
|
||||||
{ path: 'path-in-the-app', component: ExistingComponent },
|
|
||||||
{ path: 'my-first-view/:name', component: MyFirstViewComponent }, // <-- Change this!
|
|
||||||
{ path: '**', component: PageNotFoundComponent }
|
|
||||||
];
|
|
||||||
```
|
|
||||||
|
|
||||||
Then open the Typescript controller for the `MyFirstViewComponent` stored in `src/app/my-first-view` (`my-first-view.component.ts`). You need to add a few things here:
|
|
||||||
|
|
||||||
1. We need to `import` and `inject` the router into the class.
|
|
||||||
2. Subscribe to the router parameters and fetch the value.
|
|
||||||
3. Unsubscribe to the router parameters.
|
|
||||||
|
|
||||||
While #3 isn't strictly required, it would eventually cause a memory leak in your application, so
|
|
||||||
please remember to unsubscribe!
|
|
||||||
|
|
||||||
Modify the typescript controller `my-first-view.component.ts` to look like this:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { Component, OnInit } from '@angular/core';
|
|
||||||
import { ActivatedRoute } from '@angular/router';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-my-first-view',
|
|
||||||
templateUrl: './my-first-view.component.html',
|
|
||||||
styleUrls: ['./my-first-view.component.scss']
|
|
||||||
})
|
|
||||||
export class MyFirstViewComponent implements OnInit {
|
|
||||||
|
|
||||||
private params: any;
|
|
||||||
name: String;
|
|
||||||
|
|
||||||
constructor(private route: ActivatedRoute) { }
|
|
||||||
|
|
||||||
ngOnInit() {
|
|
||||||
this.params = this.route.params.subscribe(params => {
|
|
||||||
this.name = params['name'];
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy() {
|
|
||||||
this.params.unsubscribe();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Next open the template `my-first-view.component.html` in the same folder and add the greeting as in
|
|
||||||
the following source code.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<p>
|
|
||||||
Hello {{ name }}
|
|
||||||
</p>
|
|
||||||
```
|
|
||||||
|
|
||||||
You can now navigate to `http://<ip_address>:<port>/my-first-view/sir` and see the nice message "Hello sir".
|
|
||||||
|
|
||||||
@ -171,5 +171,3 @@ docs to find out how you can change the logo and background image!
|
|||||||
We have some tutorials for you to explore. Here are a few suggested ones to try next:
|
We have some tutorials for you to explore. Here are a few suggested ones to try next:
|
||||||
|
|
||||||
- [Basic theming](basic-theming.md)
|
- [Basic theming](basic-theming.md)
|
||||||
- [Create a new page](new-view.md)
|
|
||||||
- [Adding a new component](new-component.md)
|
|
||||||
|
|||||||
@ -19,7 +19,7 @@ This is an example of replacing the standard `Text` [widget](../../lib/testing/s
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
Every custom widget component must inherit the [`WidgetComponent`](../insights/components/widget.component.md) class in order to function properly:
|
Every custom widget component must inherit the [`WidgetComponent`](../core/services/widget.component.md) class in order to function properly:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
@ -169,4 +169,4 @@ At runtime you should now see your custom Angular component rendered in place of
|
|||||||
- [Form field model](../core/models/form-field.model.md)
|
- [Form field model](../core/models/form-field.model.md)
|
||||||
- [Form rendering service](../core/services/form-rendering.service.md)
|
- [Form rendering service](../core/services/form-rendering.service.md)
|
||||||
- [Form component](../core/components/form.component.md)
|
- [Form component](../core/components/form.component.md)
|
||||||
- [Widget component](../insights/components/widget.component.md)
|
- [Widget component](../core/services/widget.component.md)
|
||||||
|
|||||||
@ -19,7 +19,7 @@ This is an example of replacing the standard `Text` [widget](../../lib/testing/s
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
Every custom [widget](../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) must inherit the [`WidgetComponent`](../insights/components/widget.component.md) class in order to function properly:
|
Every custom [widget](../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) must inherit the [`WidgetComponent`](../core/services/widget.component.md) class in order to function properly:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
@ -181,4 +181,4 @@ This is an example of rendering custom APS stencils using custom Angular compone
|
|||||||
- [Form field model](../core/models/form-field.model.md)
|
- [Form field model](../core/models/form-field.model.md)
|
||||||
- [Form rendering service](../core/services/form-rendering.service.md)
|
- [Form rendering service](../core/services/form-rendering.service.md)
|
||||||
- [Form component](../core/components/form.component.md)
|
- [Form component](../core/components/form.component.md)
|
||||||
- [Widget component](../insights/components/widget.component.md)
|
- [Widget component](../core/services/widget.component.md)
|
||||||
|
|||||||
@ -109,4 +109,4 @@ formRenderingService.setComponentTypeResolver('text', customResolver, true);
|
|||||||
- [Form field model](../core/models/form-field.model.md)
|
- [Form field model](../core/models/form-field.model.md)
|
||||||
- [Form rendering service](../core/services/form-rendering.service.md)
|
- [Form rendering service](../core/services/form-rendering.service.md)
|
||||||
- [Form component](../core/components/form.component.md)
|
- [Form component](../core/components/form.component.md)
|
||||||
- [Widget component](../insights/components/widget.component.md)
|
- [Widget component](../core/services/widget.component.md)
|
||||||
|
|||||||
@ -655,7 +655,7 @@ backend services have been tested with each released version of ADF.
|
|||||||
- [Version manager component](content-services/components/version-manager.component.md)
|
- [Version manager component](content-services/components/version-manager.component.md)
|
||||||
- [Viewer component](core/components/viewer.component.md)
|
- [Viewer component](core/components/viewer.component.md)
|
||||||
- [Webscript component](content-services/components/webscript.component.md)
|
- [Webscript component](content-services/components/webscript.component.md)
|
||||||
- [Widget component](insights/components/widget.component.md)
|
- [Widget component](core/services/widget.component.md)
|
||||||
|
|
||||||
<!--v200 end-->
|
<!--v200 end-->
|
||||||
|
|
||||||
|
|||||||
@ -1,19 +1,6 @@
|
|||||||
# Alfresco insights
|
# Alfresco Insights Components
|
||||||
|
|
||||||
Contains a variety of components, directives and services used throughout ADF
|
Contains a variety of components, directives and services used throughout ADF to provide insights into the data stored in Alfresco.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
||||||
|
|
||||||
<!-- toc -->
|
|
||||||
|
|
||||||
- [Documentation](#documentation)
|
|
||||||
- [Prerequisites](#prerequisites)
|
|
||||||
- [Install](#install)
|
|
||||||
- [License](#license)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
|
||||||
|
|
||||||
## Documentation
|
## Documentation
|
||||||
|
|
||||||
@ -33,6 +20,11 @@ necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng
|
|||||||
npm install @alfresco/adf-insights
|
npm install @alfresco/adf-insights
|
||||||
```
|
```
|
||||||
|
|
||||||
## License
|
## Components
|
||||||
|
|
||||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
| Name | Description |
|
||||||
|
|------------------------------------------------------------------------------------|----------------------------------------------------------|
|
||||||
|
| [Analytics Generator Component](docs/components/analytics-generator.component.md) | Generates and shows charts |
|
||||||
|
| [APS Analytics List Component](docs/components/analytics-report-list.component.md) | Shows a list of all available reports |
|
||||||
|
| [APS Analytics Component](docs/components/analytics.component.md) | Shows the charts related to the reportId passed as input |
|
||||||
|
| [Diagram Component](docs/components/diagram.component.md) | Displays process diagrams. |
|
||||||
|
|||||||
@ -0,0 +1,32 @@
|
|||||||
|
# Analytics Generator Component
|
||||||
|
|
||||||
|
Generates and shows charts for a specific report.
|
||||||
|
|
||||||
|
## Basic Usage
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-analytics-generator
|
||||||
|
[reportId]="reportId"
|
||||||
|
[reportParamQuery]="reportParamQuery">
|
||||||
|
</adf-analytics>
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { AnalyticsGeneratorComponent } from '@alfresco/adf-insights';
|
||||||
|
```
|
||||||
|
|
||||||
|
### Properties
|
||||||
|
|
||||||
|
| Name | Type | Default value | Description |
|
||||||
|
|------------------|---------------|---------------|-------------------|
|
||||||
|
| reportId | `string` | | reportId. |
|
||||||
|
| reportParamQuery | `ReportQuery` | undefined | reportParamQuery. |
|
||||||
|
|
||||||
|
### Events
|
||||||
|
|
||||||
|
| Name | Type | Description |
|
||||||
|
|---------|---------------------|-------------|
|
||||||
|
| error | `EventEmitter<any>` | error. |
|
||||||
|
| success | `EventEmitter<any>` | success. |
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
# Analytics Report List Component
|
||||||
|
|
||||||
|
Shows a list of all available reports
|
||||||
|
|
||||||
|
## Basic Usage
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-analytics-report-list
|
||||||
|
[layoutType]="'LIST'">
|
||||||
|
</adf-analytics-report-list>
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { AnalyticsReportListComponent } from '@alfresco/adf-insights';
|
||||||
|
```
|
||||||
|
|
||||||
|
### Properties
|
||||||
|
|
||||||
|
| Name | Type | Default value | Description |
|
||||||
|
|-------------|-----------|---------------|-----------------------------|
|
||||||
|
| appId | `number` | | appId ID of the target app. |
|
||||||
|
| layoutType | `string` | LAYOUT_LIST | layout Type LIST or GRID. |
|
||||||
|
| selectFirst | `boolean` | false | selectFirst. |
|
||||||
|
|
||||||
|
### Events
|
||||||
|
|
||||||
|
| Name | Type | Description |
|
||||||
|
|-------------|---------------------------------------|---------------|
|
||||||
|
| error | `EventEmitter<any>` | error. |
|
||||||
|
| reportClick | `EventEmitter<ReportParametersModel>` | report Click. |
|
||||||
|
| success | `EventEmitter<any>` | success. |
|
||||||
30
lib/insights/docs/components/analytics.component.md
Normal file
30
lib/insights/docs/components/analytics.component.md
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
# Analytics Component
|
||||||
|
|
||||||
|
Shows the charts for a specific report and application.
|
||||||
|
|
||||||
|
## Basic Usage
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-analytics
|
||||||
|
[appId]="1001"
|
||||||
|
[reportId]="2006">
|
||||||
|
</adf-analytics>
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Properties
|
||||||
|
|
||||||
|
| Name | Type | Default value | Description |
|
||||||
|
|----------------|-----------|---------------|-----------------------------|
|
||||||
|
| appId | `number` | | appId ID of the target app. |
|
||||||
|
| hideParameters | `boolean` | false | hideParameters. |
|
||||||
|
| reportId | `string` | | reportId. |
|
||||||
|
|
||||||
|
### Events
|
||||||
|
|
||||||
|
| Name | Type | Description |
|
||||||
|
|---------------|---------------------|-----------------------------|
|
||||||
|
| editReport | `EventEmitter<any>` | emitted when editReport. |
|
||||||
|
| reportDeleted | `EventEmitter<any>` | emitted when reportDeleted. |
|
||||||
|
| reportSaved | `EventEmitter<any>` | emitted when reportSaved. |
|
||||||
46
lib/insights/docs/components/diagram.component.md
Normal file
46
lib/insights/docs/components/diagram.component.md
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
# Diagram Component
|
||||||
|
|
||||||
|
Displays process diagrams.
|
||||||
|
|
||||||
|
## Basic Usage
|
||||||
|
|
||||||
|
This component shows the diagram of a process.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-diagram
|
||||||
|
[processDefinitionId]="processDefinitionId">
|
||||||
|
</adf-diagram>
|
||||||
|
```
|
||||||
|
|
||||||
|
The below component shows the diagram of a running process instance with the activities highlighted according to their state (Active/Completed/Pending).
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-diagram
|
||||||
|
[processInstanceId]="processInstanceId">
|
||||||
|
</adf-diagram>
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { DiagramComponent } from '@alfresco/adf-insights';
|
||||||
|
```
|
||||||
|
|
||||||
|
### Properties
|
||||||
|
|
||||||
|
| Name | Type | Default value | Description |
|
||||||
|
|---------------------|----------|---------------|----------------------|
|
||||||
|
| height | `number` | 500 | height. |
|
||||||
|
| metricColor | `any` | | metricColor. |
|
||||||
|
| metricPercentages | `any` | | metricPercentages. |
|
||||||
|
| metricType | `string` | "" | metricType. |
|
||||||
|
| processDefinitionId | `any` | | processDefinitionId. |
|
||||||
|
| processInstanceId | `any` | | processInstanceId. |
|
||||||
|
| width | `number` | 1000 | width. |
|
||||||
|
|
||||||
|
### Events
|
||||||
|
|
||||||
|
| Name | Type | Description |
|
||||||
|
|---------|---------------------|-------------|
|
||||||
|
| error | `EventEmitter<any>` | error. |
|
||||||
|
| success | `EventEmitter<any>` | success. |
|
||||||
@ -19,5 +19,12 @@
|
|||||||
"styleIncludePaths": [
|
"styleIncludePaths": [
|
||||||
"../core/src/lib"
|
"../core/src/lib"
|
||||||
]
|
]
|
||||||
}
|
},
|
||||||
|
"allowedNonPeerDependencies": [
|
||||||
|
"@alfresco/adf-core",
|
||||||
|
"@ngx-translate/core",
|
||||||
|
"chart.js",
|
||||||
|
"ng2-charts",
|
||||||
|
"raphael"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,18 +10,20 @@
|
|||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
|
"url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"dependencies": {
|
||||||
"@angular/common": ">=14.1.3",
|
|
||||||
"@angular/compiler": ">=14.1.3",
|
|
||||||
"@angular/core": ">=14.1.3",
|
|
||||||
"@angular/forms": ">=14.1.3",
|
|
||||||
"@angular/material": ">=14.1.2",
|
|
||||||
"@alfresco/adf-core": ">=6.9.0",
|
"@alfresco/adf-core": ">=6.9.0",
|
||||||
"@ngx-translate/core": ">=14.0.0",
|
"@ngx-translate/core": ">=14.0.0",
|
||||||
"chart.js": "^4.3.0",
|
"chart.js": "^4.3.0",
|
||||||
"ng2-charts": "^4.1.1",
|
"ng2-charts": "^4.1.1",
|
||||||
"raphael": ">=2.3.0"
|
"raphael": ">=2.3.0"
|
||||||
},
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@angular/common": ">=14.1.3",
|
||||||
|
"@angular/compiler": ">=14.1.3",
|
||||||
|
"@angular/core": ">=14.1.3",
|
||||||
|
"@angular/forms": ">=14.1.3",
|
||||||
|
"@angular/material": ">=14.1.2"
|
||||||
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"analytics",
|
"analytics",
|
||||||
"alfresco-component",
|
"alfresco-component",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user