mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-4152] Restructured remaining doc folders and fixed links (#4441)
* [ADF-4152] Moved proc services cloud docs to subfolders * [ADF-4152] Fixed links in PS cloud docs * [ADF-4152] Added subfolders and checked links for extensions and insights docs * [ADF-4152] Moved proc services cloud docs to subfolders * [ADF-4152] Fixed links in PS cloud docs * [ADF-4152] Added subfolders and checked links for extensions and insights docs * [ADF-4152] Fixed links in Proc cloud, Insights and Extensions docs * [ADF-4152] Updated links in user guide * [ADF-4152] Fixed broken links in tutorials * [ADF-4152] Fixed remaining links in core docs * [ADF-4152] Fixed remaining links in proc services docs * [ADF-4152] Fixed remaining links in content services docs * [ADF-4152] Fixed links in breaking changes docs * [ADF-4152] Updated main README index page * [ADF-4152] Fixed glitches with preview ext component docs
This commit is contained in:
Andy Stark
committed by
Eugenio Romano
Eugenio Romano
parent
8edf92f325
commit
31479cfaa4
@@ -10,13 +10,15 @@ on an item below to see the corresponding guide page.
|
||||
|
||||
<!--guide start-->
|
||||
|
||||
- [Introduction to ADF](adf-introduction.md)
|
||||
- [Angular Material Design](angular-material-design.md)
|
||||
- [App extensions](app-extensions.md)
|
||||
- [Form Extensibility and Customisation](extensibility.md)
|
||||
- [Internationalization in ADF](internationalization.md)
|
||||
- [Theming](theming.md)
|
||||
- [Right-to-left language support](rtl-support.md)
|
||||
- [Transclusion](transclusion.md)
|
||||
- [Typography](typography.md)
|
||||
- [Walkthrough - adding indicators to highlight information about a node](metadata-indicators.md)
|
||||
- [Right-to-left language support](rtl-support.md)
|
||||
|
||||
<!--guide end-->
|
||||
|
||||
@@ -27,9 +27,9 @@ branding, and features that you need. Some examples of where this can be useful
|
||||
|
||||
You can find full instructions for installing ADF and its prerequisites in our
|
||||
tutorial
|
||||
[*Creating your first ADF application*](../tutorials/creating-your-first-adf-application.md).
|
||||
[_Creating your first ADF application_](../tutorials/creating-your-first-adf-application.md).
|
||||
When you have the environment and the scaffold app set up, the other
|
||||
[tutorials](../tutorials/README.md) then explain how to connect to the backend services
|
||||
and add custom features to your app. Use the [component reference](../README.md) pages
|
||||
to learn about component features and the [user guide](../user-guide/README.md)
|
||||
to learn [about component](../core/components/about.component.md) features and the [user guide](../user-guide/README.md)
|
||||
to learn about specific tasks and topics in depth.
|
||||
|
||||
@@ -45,7 +45,7 @@ a place in the app where the actual content will be supplied dynamically.
|
||||
ADF provides a number of features that offer extension points or help
|
||||
with extensibility in general:
|
||||
|
||||
- **Components**: The [Dynamic component](../extensions/dynamic.component.md)
|
||||
- **Components**: The [Dynamic component](../extensions/components/dynamic.component.md)
|
||||
has no content of its own but it has an `id` property that
|
||||
references a registered component extension ID. The referenced component
|
||||
will be added as a child of the Dynamic component at runtime.
|
||||
@@ -78,9 +78,9 @@ with extensibility in general:
|
||||
|
||||
## Setting up an app for extensibility
|
||||
|
||||
You can register component classes for use with the [Dynamic component](../extensions/dynamic.component.md)
|
||||
You can register component classes for use with the [Dynamic component](../extensions/components/dynamic.component.md)
|
||||
using the `setComponents` method of the
|
||||
[Extension service](../extensions/extension.service.md) (see the Dynamic component page for further details
|
||||
[Extension service](../extensions/services/extension.service.md) (see the Dynamic component page for further details
|
||||
and code samples). The service also has `setAuthGuards` and
|
||||
`setEvaluators` methods that behave analogously.
|
||||
|
||||
@@ -117,7 +117,7 @@ below:
|
||||
}
|
||||
```
|
||||
|
||||
You can use the `load` method of the [Extension service](../extensions/extension.service.md) to read the file into a
|
||||
You can use the `load` method of the [Extension service](../extensions/services/extension.service.md) to read the file into a
|
||||
convenient object that implements the [`ExtensionConfig`](../../lib/extensions/src/lib/config/extension.config.ts) and [`ExtensionRef`](../../lib/extensions/src/lib/config/extension.config.ts) interfaces.
|
||||
Note that the `extension.schema.json` file contains a [JSON schema](http://json-schema.org/)
|
||||
that allows for format checking and also text completion in some editors.
|
||||
@@ -144,7 +144,7 @@ following example:
|
||||
```
|
||||
|
||||
You can access routes from the config using the `getRouteById` method of the
|
||||
[Extension service,](../extensions/extension.service.md) which returns a [`RouteRef`](../../lib/extensions/src/lib/config/routing.extensions.ts) object. Note that the references
|
||||
[Extension service,](../extensions/services/extension.service.md) which returns a [`RouteRef`](../../lib/extensions/src/lib/config/routing.extensions.ts) object. Note that the references
|
||||
to the component and auth guards are extension IDs,
|
||||
[as described above](#extension-points).
|
||||
|
||||
@@ -173,7 +173,7 @@ The `actions` array has the following structure:
|
||||
]
|
||||
```
|
||||
|
||||
The [Extension service](../extensions/extension.service.md) defines a `getActionById` method that returns an
|
||||
The [Extension service](../extensions/services/extension.service.md) defines a `getActionById` method that returns an
|
||||
[`ActionRef`](../../lib/extensions/src/lib/config/action.extensions.ts) object corresponding to an item from this array.
|
||||
|
||||
The `type` property refers to an action type that must be provided by the
|
||||
@@ -185,7 +185,7 @@ a message, URL or other static text data. However, you can also define a
|
||||
JavaScript expression here by surrounding it with `$( ... )`. The expression
|
||||
has access to an object named `context` which typically contains information
|
||||
about the app state. You can supply the object that contains this data via the
|
||||
`runExpression` method of the [Extension service,](../extensions/extension.service.md) which actually evaluates the
|
||||
`runExpression` method of the [Extension service,](../extensions/services/extension.service.md) which actually evaluates the
|
||||
expression. Note that the result of the expression doesn't necessarily
|
||||
have to be a string.
|
||||
|
||||
@@ -204,7 +204,7 @@ The simplest type of rule is configured as shown below:
|
||||
```
|
||||
|
||||
The `type` is the ID of a `RuleEvaluator` function that has been registered using
|
||||
the `setEvaluators` method of the [Extension service](../extensions/extension.service.md).
|
||||
the `setEvaluators` method of the [Extension service](../extensions/services/extension.service.md).
|
||||
The evaluator is a boolean function that represents whether a certain
|
||||
condition is true or false (eg, whether an item is selected, whether the user
|
||||
has certain options enabled, etc). The evaluator has access to a context object
|
||||
|
||||
@@ -26,19 +26,19 @@ _Note: it is assumed you are familiar with Alfresco Process Services (powered by
|
||||
|
||||
## How components and widgets are rendered on a Form
|
||||
|
||||
All form field editors (aka widgets) on a [`Form`](../../lib/process-services/task-list/models/form.model.ts) are rendered by means of [`FormFieldComponent`](../core/form-field.component.md)
|
||||
that takes an instance of a [`FormFieldModel`](../core/form-field.model.md):
|
||||
All form field editors (aka widgets) on a [`Form`](../../lib/process-services/task-list/models/form.model.ts) are rendered by means of [`FormFieldComponent`](../core/components/form-field.component.md)
|
||||
that takes an instance of a [`FormFieldModel`](../core/models/form-field.model.md):
|
||||
|
||||
```html
|
||||
<form-field [field]="field"></form-field>
|
||||
```
|
||||
|
||||
This component depends on [`FormRenderingService`](../core/form-rendering.service.md) service to map [`FormFieldModel`](../core/form-field.model.md) to UI component
|
||||
This component depends on [`FormRenderingService`](../core/services/form-rendering.service.md) service to map [`FormFieldModel`](../core/models/form-field.model.md) to UI component
|
||||
based on field type or metadata information.
|
||||
|
||||
### Component type resolvers
|
||||
|
||||
[`FormRenderingService`](../core/form-rendering.service.md) maps field types to corresponding instances exposing `ComponentTypeResolver` interface:
|
||||
[`FormRenderingService`](../core/services/form-rendering.service.md) maps field types to corresponding instances exposing `ComponentTypeResolver` interface:
|
||||
|
||||
```ts
|
||||
export interface ComponentTypeResolver {
|
||||
@@ -46,7 +46,7 @@ export interface ComponentTypeResolver {
|
||||
}
|
||||
```
|
||||
|
||||
Typically a `ComponentTypeResolver` is a function that takes [`FormFieldModel`](../core/form-field.model.md) and returns corresponding component type.
|
||||
Typically a `ComponentTypeResolver` is a function that takes [`FormFieldModel`](../core/models/form-field.model.md) and returns corresponding component type.
|
||||
It can be either a predefined component type or a dynamically evaluated based on field properties and metadata.
|
||||
|
||||
#### Static component mapping
|
||||
@@ -66,7 +66,7 @@ formRenderingService.setComponentTypeResolver('text', () => CustomWidgetComponen
|
||||
|
||||
#### Dynamic component mapping
|
||||
|
||||
Alternatively your resolver may return different component types based on [`FormFieldModel`](../core/form-field.model.md) state and condition:
|
||||
Alternatively your resolver may return different component types based on [`FormFieldModel`](../core/models/form-field.model.md) state and condition:
|
||||
|
||||
```ts
|
||||
let customResolver: ComponentTypeResolver = (field: FormFieldModel): Type<{}> => {
|
||||
@@ -111,7 +111,7 @@ First let's create a simple APS form with `Text` widgets:
|
||||
|
||||
|
||||
|
||||
Every custom widget must inherit [`WidgetComponent`](../insights/widget.component.md) class in order to function properly:
|
||||
Every custom widget must inherit [`WidgetComponent`](../insights/components/widget.component.md) class in order to function properly:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core';
|
||||
@@ -158,7 +158,7 @@ don't forget to import it into your main application one:
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
Now you can import [`FormRenderingService`](../core/form-rendering.service.md) in any of your Views and override default mapping similar to the following:
|
||||
Now you can import [`FormRenderingService`](../core/services/form-rendering.service.md) in any of your Views and override default mapping similar to the following:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core';
|
||||
@@ -252,7 +252,7 @@ And import into your Application Module
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
Now you can import [`FormRenderingService`](../core/form-rendering.service.md) in any of your Views and provide new mapping:
|
||||
Now you can import [`FormRenderingService`](../core/services/form-rendering.service.md) in any of your Views and provide new mapping:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core';
|
||||
@@ -274,7 +274,7 @@ At runtime you should now see your custom Angular component rendered in place of
|
||||
|
||||
## See Also
|
||||
|
||||
- [Form field model](../core/form-field.model.md)
|
||||
- [Form rendering service](../core/form-rendering.service.md)
|
||||
- [Form component](../core/form.component.md)
|
||||
- [Widget component](../insights/widget.component.md)
|
||||
- [Form field model](../core/models/form-field.model.md)
|
||||
- [Form rendering service](../core/services/form-rendering.service.md)
|
||||
- [Form component](../core/components/form.component.md)
|
||||
- [Widget component](../insights/components/widget.component.md)
|
||||
|
||||
@@ -71,11 +71,11 @@ below:
|
||||
```
|
||||
|
||||
The hierarchical structure is referred to in the UI using the familiar "dot"
|
||||
notation (so `FORM.START_FORM.TITLE` would be the key for the "Start [Form"](../../lib/process-services/task-list/models/form.model.ts)
|
||||
notation (so `FORM.START_FORM.TITLE` would be the key for the "Start Form"
|
||||
string here). This is useful for grouping related messages and providing
|
||||
singular and plural versions, among other things.
|
||||
|
||||
The [Translation service](../core/translation.service.md) defines the `get` method to
|
||||
The [Translation service](../core/services/translation.service.md) defines the `get` method to
|
||||
get the translation of a key in the current language. A simple component might
|
||||
contain code like this:
|
||||
|
||||
@@ -140,11 +140,11 @@ should check you are using the key correctly.
|
||||
|
||||
## Using the translate pipe
|
||||
|
||||
Using [`TranslationService`](../core/translation.service.md)`.get` is straightforward but it is often more
|
||||
Using [`TranslationService`](../core/services/translation.service.md)`.get` is straightforward but it is often more
|
||||
convenient to add translation keys directly into your page's HTML.
|
||||
Use the `translate` pipe to convert a key in the page directly to the
|
||||
corresponding text. For example, the following will display the
|
||||
"Start [Form"](../../lib/process-services/task-list/models/form.model.ts) text as above but without any code or variables in the
|
||||
"Start Form" text as above but without any code or variables in the
|
||||
component's `.ts` file:
|
||||
|
||||
<!-- {% raw %} -->
|
||||
@@ -178,7 +178,7 @@ following:
|
||||
}
|
||||
```
|
||||
|
||||
The [Translation service](../core/translation.service.md) page has full details
|
||||
The [Translation service](../core/services/translation.service.md) page has full details
|
||||
of how to add custom translations, including the locations of the required files
|
||||
and code samples for enabling the new translations in your app.
|
||||
|
||||
@@ -207,7 +207,7 @@ messages whose content can change at runtime. For example, in the built-in
|
||||
|
||||
The sections in curly braces are _interpolation variables_ that you supply
|
||||
at runtime. You can specify them by passing an extra parameter to
|
||||
[`TranslationService`](../core/translation.service.md)`.get`; this is an object whose properties have the same
|
||||
[`TranslationService`](../core/services/translation.service.md)`.get`; this is an object whose properties have the same
|
||||
names as the interpolation variables in the string:
|
||||
|
||||
```ts
|
||||
@@ -232,7 +232,7 @@ You can use interpolations with the `translate` pipe in a similar way:
|
||||
|
||||
## How the display language is selected
|
||||
|
||||
The `locale` preference in the [user preferences](../core/user-preferences.service.md)
|
||||
The `locale` preference in the [user preferences](../core/services/user-preferences.service.md)
|
||||
contains the language code that will be used to display the ADF app. Since the user
|
||||
preferences can only be saved by the app when it runs, they will not immediately be available when
|
||||
the app launches for the first time. The app uses the following priorities to determine
|
||||
@@ -251,37 +251,37 @@ The table below illustrates how the selection is made:
|
||||
| X | fr | jp | en | fr |
|
||||
| it | fr | jp | en | it |
|
||||
|
||||
The [translation service](../core/translation.service.md) probes the browser culture first, for example `en-GB`.
|
||||
The [translation service](../core/services/translation.service.md) probes the browser culture first, for example `en-GB`.
|
||||
If the `en-GB.json` file does not exist, the service falls back to the language id: `en`.
|
||||
|
||||
Once the locale language is determined, it is saved to the user preferences and this saved value
|
||||
will be used from that point on, regardless of the `app.config.json` and browser settings.
|
||||
|
||||
However, you can change the `locale` user preference from code using the
|
||||
[User Preferences service](../core/user-preferences.service.md) and the updated value
|
||||
[User Preferences service](../core/services/user-preferences.service.md) and the updated value
|
||||
will still override any browser or `app.config.json` settings.
|
||||
ADF also provides a [Language Menu component](../core/language-menu.component.md) that
|
||||
ADF also provides a [Language Menu component](../core/components/language-menu.component.md) that
|
||||
you can add to a page to let the user set the `locale` preference easily. The
|
||||
list of available languages is defined in the `app.config.json` file for the app.
|
||||
|
||||
The `translate` pipe reacts automatically to a change in the locale language and
|
||||
immediately updates the display. However, text added via a variable set using
|
||||
[`TranslationService`](../core/translation.service.md)`.get`, as in the example above, will not be
|
||||
[`TranslationService`](../core/services/translation.service.md)`.get`, as in the example above, will not be
|
||||
updated directly in this way. Instead, you will need to get a new translation and set the
|
||||
variable's value again explicitly from the code.
|
||||
|
||||
See the [Language Menu component](../core/language-menu.component.md) page for further
|
||||
See the [Language Menu component](../core/components/language-menu.component.md) page for further
|
||||
details and usage examples.
|
||||
|
||||
## Support for i18n within ADF components
|
||||
|
||||
Some components allow you to use translation keys in places where you would normally
|
||||
supply your own messages directly. For example, the
|
||||
[Data Column component](../core/data-column.component.md) can accept a key instead of
|
||||
[Data Column component](../core/components/data-column.component.md) can accept a key instead of
|
||||
normal text to specify the column title. Consult the documentation for a
|
||||
component to see if it has built-in support for i18n.
|
||||
|
||||
## See also
|
||||
|
||||
- [Translation service](../core/translation.service.md)
|
||||
- [Language Menu component](../core/language-menu.component.md)
|
||||
- [Translation service](../core/services/translation.service.md)
|
||||
- [Language Menu component](../core/components/language-menu.component.md)
|
||||
|
||||
@@ -13,11 +13,11 @@ most cases, this is used to make small customizations (for example, the various
|
||||
list components let you supply custom content to show when the list is empty).
|
||||
However, there are also a few "containers" whose entire content is set by the user
|
||||
with the container itself being mainly for convenient display and formatting
|
||||
(for example, the [Info drawer component](../core/info-drawer.component.md)).
|
||||
(for example, the [Info drawer component](../core/components/info-drawer.component.md)).
|
||||
|
||||
You supply the content you want to transclude between the opening and closing tags of
|
||||
the main component. In a few cases, this content can be completely free-form as with
|
||||
the body section of the [Login component](../core/login.component.md):
|
||||
the body section of the [Login component](../core/components/login.component.md):
|
||||
|
||||
```html
|
||||
<adf-login ...>
|
||||
@@ -28,7 +28,7 @@ the body section of the [Login component](../core/login.component.md):
|
||||
```
|
||||
|
||||
More often, though, the main component makes use of one or more sub-components to add
|
||||
structure to the transclusion. For example, the [Login component](../core/login.component.md)
|
||||
structure to the transclusion. For example, the [Login component](../core/components/login.component.md)
|
||||
also has sub-components for the header and footer regions in addition to the free-form
|
||||
content of the body:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user