You can add a number of attributes to your web embed snippet to expand its
functionality.
Note: To simplify the code, attributes with default values are removed from the
automatically generated web embed snippet.
General
Note: - The web embed supports general HTML element attributes and methods, such as
addEventListener. For more information, see the W3C
HTML reference information. - For JSON objecs, use single quotes around the entire string representing the
object contents.
| Name | Description | Type | Default value | Generated automatically |
| Id | Unique ID for embedding element. | String | none | ✅ |
| deferLoad | Embedding is initially loaded as not shown. | Boolean | false | ❌ |
| popupReauth | If true, the system prompts for re-authentication when the
refresh token expires. | Boolean | true | ❌ |
| casePage | Specifies which page to open. The following values are available:- full
- Uses the full case page when displaying case-related
UI.
- assignment
- Uses an alternate page, which constrains the UI to the
assignment flow action area.
- assignmentWithStages
- Uses an alternate page, which constrains the UI to just
the assignment flow action area and includes
stages.
| Constant | assignment | ✅ |
Theme
| Name | Description | Type | Default value | Generated automatically |
| theme | Stringified JSON object that represents the theme of the web
embed. The theme property is optional. | JSON object | defaults to the out-of-the-box Cosmos theme | ❌ |
The theme is a JSON Object that contains the value of the
rule-ui-theme that you use to render the web embed. For
more information on themes, see Defining themes.
For example: The following snippet contains sample values that you can set inside the
theme:
{
"base": {
"palette": {
"brand-primary": "#3c8712",
"foreground-color": "#5e4242",
"app-background": "#b1bde6"
}
}
}
You
can pass the theme object as an attribute to the <pega-embed>
tag. The object must be serialized and passed as a
string:
<pega-embed id="theEmbed" action="https://docs-previous.pega.com/openPage" pageid="pyWorklist" pageclass="Data-Portal" appalias="enrollment1"
pegaserverurl="https://X.X.X.X/prweb" staticcontenturl="https://Y.Y.Y.Y/c11n/"
authservice="pega" clientid="11111111111111"
theme='{"base":{"palette":{"brand-primary":"#3c8712","foreground-color":"#5e4242","border-line":"#5ac538","app-background":"#b1bde6"}}}'>
</pega-embed>
Alternatively,
you can pass the theme JSON object directly to the web component tag – either during
creation of the <pega-embed> tag, or in conjunction with the
‘deferLoad’ attribute and the load function.
The following code illustrates an object passed directly during the creation
of the web component tag:
var el = document.createElement("pega-embed");
el.theme= { "base": { "palette": { "brand-primary": "#3c8712", "foreground-color": "#5e4242", "app-background": "#b1bde6" } } };
The following code illustrates an object passed to the web component tag before
calling the load method:
var el = document.getElementById("theEmbed")
el.theme= { "base": { "palette": { "brand-primary": "#3c8712", "foreground-color": "#5e4242", "app-background": "#b1bde6" } } };
el.load();
For more information, see JavaScript methods in web embed.
Action
| Name | Description | Type | Default value | Generated automatically |
| action | Defines the action that the web embed performs. The following
values are available:createCaseopenCaseopenAssignmentopenPage
| Constant | none | ✅ |
| caseTypeID | ID of the case type. Valid only for the
createCase action. | String | none | ✅ |
| caseID | ID of the case. Valid only for the openCase
action. | String | none | ✅ |
| assignmentID | ID of the case. Valid only for the
openAssignment action. | String | none | ✅ |
| pageID | ID of the page. Valid only for the openPage
action. | String | none | ✅ |
| pageClass | Class of the page. Valid only for the openPage
action. | String | none | ✅ |
| startingFields | Stringified JSON object that represents additional values to pass
to createCase. Valid only for the
createCase action. | JSON object | none | ❌ |
For example: The following snippet represents a startingFields
JSON:
‘{"FirstName":"Adam","LastName":"Smith","Vehicle":{"Make":"Honda","Model":"Accord"}}’
You
can pass the startingFields object as an attribute to the
<pega-embed> tag. The object must be serialized and
passed as a
string:
<pega-embed id="theEmbed" action="https://docs-previous.pega.com/openPage" pageid="pyWorklist" pageclass="Data-Portal" appalias="enrollment1"
pegaserverurl="https://X.X.X.X/prweb" staticcontenturl="https://Y.Y.Y.Y/c11n/"
authservice="pega" clientid="11111111111111"
startingFields=‘{"FirstName":"Adam","LastName":"Smith","Vehicle":{"Make":"Honda","Model":"Accord"}}’>
</pega-embed>
Alternatively, you can pass the JSON object directly to the web
component tag – either during creation of the <pega-embed> tag,
or in conjunction with the ‘deferLoad’ attribute and the
load function.
The following code illustrates an object
passed directly during the creation of the web component tag:
var el = document.createElement("pega-embed");
el.startingFields=‘{"FirstName":"Adam","LastName":"Smith","Vehicle":{"Make":"Honda","Model":"Accord"}}’;
Configuration
| Name | Description | Type | Default value | Generated automatically |
| pegaServerUrl | URL to the Pega Infinity server. | String | none | ✅ |
| staticContentUrl | URL to the Constellation Static Content service, from where the
system loads the UI engine code. | String | none | ✅ |
| appAlias | The alias of the embedded application. Note: If the appAlias
argument is not specified, resulting REST endpoints cannot add
the “app/appAlias” segments. In this case, the system does not
support using non-primary Access Groups within an Operator
record. | String | none | ✅ |
Authentication
| Name | Description | Type | Default value | Generated automatically |
| authHeader | Authentication header such as “Bearer
<token>” that you use for DX API transactions
invoked by the Constellation UI Service. The token is used to pass
the authentication header. As a best practice, do not specify this,
and use the ssKeyTokenInfo attribute instead. The system ignores the
attribute if the ssKeyTokenInfo attribute is also specified. | String | none | ❌ |
| ssKeyTokenInfo | Key name to use with the sessionStorage.getItem
API to pass the token information to the embedding. The attribute
should contain the JSON.stringify of the token endpoint response.
This attribute contains access_token,
token_type, refresh_token
and session_index values. | String | none | ❌ |
| silentTimeout | Specifies the number of milliseconds that the system waits for
authentication to complete in a hidden iframe. You can set the
value to 0 to avoid an attempt to authorize the endpoint
transaction in a hidden iframe. This setting is relevant for
authentication services other than Pega. | Integer | 5000 | ❌ |
OAuth 2.0
| Name | Description | Type | Default value | Generated automatically |
| clientId | Client ID from the OAuth 2.0 client registration record. | String | none | ✅ |
| redirectUri | Redirect URI from the OAuth 2.0 client registration record. The
URI is invoked after a successful visible authorization challenge. | String | staticContentUrl + “embed/auth.html” | ❌ |
| authorizeUri | OAuth 2.0 authorization end point. | String | pegaServerUrl + “/PRRestService/oauth2/v1/” + authorize | ❌ |
| tokenUri | OAuth 2.0 token end point. | String | pegaServerUrl + “/PRRestService/oauth2/v1/” + token | ❌ |
| revokeUri | OAuth 2.0 token revocation end point. | String | pegaServerUrl + “/PRRestService/oauth2/v1/” + revoke | ❌ |
| authService | Authentication Service Alias for invoking the authorize
endpoint. | String | pega | ✅ |
Special attributes
Note: Not for production use. Special attributes are useful for testing and demo
scenarios. You must use the attributes together, and they only work with the
pega authentication service.
| Name | Description | Type | Default value | Generated automatically |
| userIdentifier | The user identifier value that you use to log in and generate
OAuth access tokens. | String | none | ❌ |
| password | The password for the userIdentifier attribute encoded in base64. | String | none | ❌ |
