About
Speeding up development with a toolkit of common solutions—so developers can focus on what matters even more.
Example
Code Example
This example shows how to invoke the about dialog on demand, passing in some content, version info and the product name and product line.
$('body').about({
appName: 'My App Name',
productName: 'My Product line',
version: 'ver. 1.0.0',
content: '<p>Fashionable application for fashionable customers.</p>'
});
Accessibility
aria-describedbyThe component auto renders anaria-describedbyattribute which is necessary for setting the static text that is to be announced for the dialog static content.
Code Tips
The about component example by default adds the current year's copyright, and useful browser info. This should be useful info for support situations. Don't make your contents of the modal too overloaded with info. Also About dialogs do not need to be overly prominent in your application (for example as a splash screen). The typical placement is in a top level actions button menu item.
Testability
You can add custom id's/automation id's to the about dialog that can be used for scripting using the attributes setting. This setting takes either an object or an array for setting multiple values such as an automation-id or other attributes. For example:
attributes: { name: 'id', value: args => `message-id-${args.id}` }
Setting the id/automation id with a string value:
attributes: { name: 'data-automation-id', value: 'my-unique-id' }
Setting the id/automation id with a string value:
attributes: [{ name: 'id', value: 'my-unique-id' }, { name: 'data-automation-id', value: 'my-unique-id' }]
If you set the attributes on the about dialog, you will get an ID added to the root of the dialog. Also the close button will get an id with -btn-close appended after the id provided.
Keyboard Shortcuts
- Esc: If pressed while open will close the about component and return focus to the triggering element
Upgrading from 3.X
- Replace
.inforAboutDialog()with.about() - Many of the names of the settings (e.g.
productNametoappName) to have changed so must be updated to the new settings.
about
The About Dialog Component is displays information regarding the application.
new About(element: object, settings: object?)
| Name | Type | Description |
|---|---|---|
| element |
object
|
The component element. |
| settings |
object?
|
The component settings. |
| settings.appName |
string='Infor Application Name'
|
The Main Application Name to display in the header. |
| settings.content |
string?
|
Additional text content to display at the top. |
| settings.copyrightYear |
string=newDate().getFullYear()
|
The year displayed in the copyright, defaults to current year. |
| settings.deviceSpecs |
boolean=true
|
Determines whether or not to display device information. This information includes Browser, Platform, Locale and if Cookies are Enabled. |
| settings.productName |
string?
|
Additional product name information to display. |
| settings.useDefaultCopyright |
boolean=true
|
Add the Legal Approved Infor Copyright Text. |
| settings.version |
string?
|
Semantic Version Number for example (4.0.0). |
| settings.attributes |
(array | object)=null
|
Add extra attributes like id’s to the toast element. For example
attributes: { name: 'id', value: 'my-unique-id' }
|
| settings.showCopyButton |
(array | object)=true
|
Show copy to clipboard button |
Instance Members
Copy inner text to clipboard
copyToClipBoard()
Return the browser specs. Currently returns browse, os, cookiesEnabled and locale
getDeviceSpecs(): string
Returnsstring:
The specs of the browser.
Update the component and optionally apply new settings.
updated(settings: object): object
| Name | Type | Description |
|---|---|---|
| settings |
object
|
the settings to update to. |
object:
The plugin api for chaining.
Progamatically close the About dialog.
close(): void
Returnsvoid:
Teardown and remove any added markup and events.
destroy(noModalDestroy: boolean): void
| Name | Type | Description |
|---|---|---|
| noModalDestroy |
boolean= false
|
if true, skips the routine for destroying the modal (presumably because this is called from another method that destroys the modal manually) |
void: