Attributes in web embed
You can add a number of attributes to your web embed snippet to expand its functionality.
General
- 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:
| 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.
{
"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:
| 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 | ❌ |
‘{"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. | 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 | 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
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 | ❌ |
Previous topic Custom code in the web embed snippet Next topic JavaScript methods in web embed