Assets enable you to add web resources to pages and forms. Available asset types are JavaScript, CSS, Image and Localization. Assets can be Local (file stored into the page artifact) or External (URL). The Localization asset is always local.
A local asset name must not contain special characters or spaces. An external asset name must be a standard URL.
To use the same asset in several pages, you can add it to a custom widget and use this custom widget in your application pages or forms. When you add a custom widget with assets to a page, those assets are automatically linked to the page.
Add JavaScript assets for custom scripts. They will be loaded and made available at page level. You can use them in variables of type JavaScript expression. In the value field of the variable, simply call the function and pass the required parameters.
Add CSS assets at page level and use them to edit the CSS classes property of any widget. (UI Designer integrates default Bootstrap style)
To manage multiple version of dependencies, make sure only one version of an asset is active inside a page.
To load an image for any custom widget, add image assets at page level. Access it with asset/img/[image name]
.
To use an image asset in the image widget, set the Source type
property to Asset, and then enter the image name in the Asset name
input field.
{
"fr-FR": {
"Title": "Titre",
"Default label": "Libellé par défaut",
...
},
"es-ES": {
"Title": "Título",
"Default label": "Etiqueta por defecto",
...
}
...
}
In a JavaScript asset, you can specify a dependency on an Angular module. First add the JavaScript asset, and then add the module name in the dedicated section. You can find the the available modules on http://ngmodules.org/.
To load a local image asset in a custom widget, you need to reference it in the template inside a <img>
tag with a relative path as follows: <img src="widgets/[custom widget id]/assets/img/[image name]">
The list contains page assets, the assets of the widgets used in this page and assets used by base framework.
You can delete page assets only, view local assets, and edit external assets of a page.
You cannot have more than one localization asset. When you upload a new asset file, it overwrites the existing one.
By default, only page assets are displayed. To display others scopes assets, we should check Widget or Base Framework checkbox.
You cannot move, delete or disable Base framework assets. They are here only to show you which library is used to build your artifact
In this list, you can use the arrows to reorder assets, view local assets, edit external assets, and delete any.
At runtime, assets of a custom widget are loaded in the order defined.
In the Asset list, you can manually change the order of CSS and Javascript page assets. Reorder this files can be useful to override some css classes or javascript functions.
Image or Localization assets are not imported in index.html. So we don't need to reorder them.
At runtime, CSS and JavaScript assets are loaded in the page header. This loading is done as it's represented in this list, CSS first then Javascript. All assets are loaded in order they are listed, widget assets before page assets (in alphabetical order of the widgets name).
Note that reordering assets is disabled when the list is a search results list. Indeed, reordering is only relevant if the complete list of page assets is displayed.
Note: Custom-widget assets are only editable in widget editor. You can't modify them at page level to avoid side effects on other pages. So if you want to reorder custom-widget assets, please go to widget editor.
bonitasoft.ui.extensions
module.
This filter uses the moment.js library to transform the display of a relative time. For example, it transforms '01/01/2011' to '4 years ago'.
Create a JavaScript file named date-ago-filter.js
that updates the bonitasoft.ui.extensions
module with the filter:
angular.module('bonitasoft.ui.extensions')
.filter('dateAgo', ['$window', function ($window) {
return function dateAgo(input) {
var compar = new Date(input);
return $window.moment(compar).fromNow();
};
}]);
updateDate
to hold a timestamp as a numberdateAgo
filter on the updateDate
variable as follows: updateDate | dateAgo