inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity
alfresco-ng2-components/docs/core/error-content.component.md
davidcanonieto fa2613f096 [ADF-2753] Error Component throwing default error fixed (#3364) 
* [ADF-1938] Overflowing text in reports section fidex

* [ADF-1938] Long names in report section now fit

* [ADF-1938] Reverted changes in container widget

* [ADF-2753] New error component created

* [ADF-2753] Unit test for Error Content Component

* Deleting unused files

* Deleting unused files

* Deleting unused files

* [ADF-2753] Documentation added

* [ADF-2753] Error Component throwing default error fixed

* [ADF-2753] White space removed

* [ADF-2753] Removed unnecessary files and updated trnaslation file

* [ADF-2753] Changed link for button in error component

* [ADF-2753] Updated doc file

* [ADF-2753] Removed fdescribe

* [ADF-2753] Improved code coverage
2018-05-30 13:51:04 +02:00

2.2 KiB
Raw Blame History

Error Content Component

Displays info about a specific error.

Basic Usage

Once you have catched the error in your server you will need to redirect to /error/errorCode to display information about that error.

this.router.navigate(['/error', errorCode]);

<div class="adf-error-content">
    <p class="adf-error-content-code">
        {{ errorCode }}
    </p>
    <div class="adf-error-content-shadow"></div>
    <p class="adf-error-content-title">
        {{ 'ERROR_CONTENT.' + errorCode + '.TITLE' | translate }}
    </p>
    <p class="adf-error-content-description">
        {{ 'ERROR_CONTENT.' + errorCode + '.DESCRIPTION' | translate }}
    </p>
    <div class="adf-error-content-buttons">
        <a href="/" mat-raised-button color="primary" 
            *ngIf="secondaryButtonText" (click)="onSecondButton()"
            class="adf-error-content-description-link"> 
            {{ 'ERROR_CONTENT.' + errorCode + '.SECONDARY_BUTTON.TEXT' | translate | uppercase }}
        </a>
        <a href="/" mat-raised-button color="primary" (click)="onReturnButton()">
            {{ 'ERROR_CONTENT.' + this.errorCode + '.RETURN_BUTTON.TEXT' | translate | uppercase }}
        </a>
    </div>
</div>

Properties

Error Content Component

Name Type Description
errorCode string Error code
returnButtonUrl string This is the text that will be displayed inside the secondary button
secondaryButtonText string (Optional) This is the text that will be displayed inside the secondary button
secondaryButtonUrl string (Optional) This is the link for the secondary button

Notice that you will also have to provide values for the variables used in the view template.

Details

You can customize your errors by adding them to the translate files inside lib/core/i18n.

"ERROR_CONTENT": {
    "404": {
      "TITLE": "An error occurred.",
      "DESCRIPTION": "We couldn’t find the page you were looking for.",
      "SECONDARY_BUTTON": {
        "TEXT": "",
        "URL": ""
      },
      "RETURN_BUTTON": { 
        "TEXT": "Back to home",
        "ROUTE": "home"
      }
    }
  }