{"id":6136,"date":"2020-09-14T13:38:56","date_gmt":"2020-09-14T13:38:56","guid":{"rendered":"https:\/\/bentego.com\/introduction-to-pega-web-mashup\/"},"modified":"2025-10-20T16:09:39","modified_gmt":"2025-10-20T16:09:39","slug":"introduction-to-pega-web-mashup","status":"publish","type":"post","link":"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/","title":{"rendered":"Introduction to Pega Web Mashup"},"content":{"rendered":"\n<p>Hello,<\/p>\n\n\n\n<p>In our first Pega post, we will introduce to Pega Web Mashup, which will increase the accessibility of our Pega applications. Of course, we need a Pega application and case type as a prerequisite.<\/p>\n\n\n\n<p>Therefore, first, we will create a simple Pega application on App Studio, which has increased capabilities with Pega Infinity and focus on step-by-step case design, data modeling, and UI design according to our scenario. In addition to being a resource for Pega Web Mashup, this app can also be a starting point for the use of responsive UI design, screen actions, templates, and themes. It will also be used for our future posts.<\/p>\n\n\n\n<p>In the second part, we will use Pega Web Mashup to create a mashup that embeds our Pega Platform application in another web application\/pages. With Preview Mode on Case Designer, we will simulate how our app can look on an existing web page and generate the mashup code.<\/p>\n\n\n\n<p>Let\u2019s start by creating an application\u2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Create a New Application<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1.1. Scenario<\/h3>\n\n\n\n<p>Create a new application in Dev Studio and configure two operators:<\/p>\n\n\n\n<p>Application name:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>MyApp<\/li>\n<\/ul>\n\n\n\n<p>Operator IDs<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>admin@myapp will be the administrator.<\/li>\n<li>author@myapp will be the author.<\/li>\n<\/ul>\n\n\n\n<p>Change the security policies for the newly created users.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1.2. Credentials<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Log in to Pega Platform 8.x with your predefined operator that created for you.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">1.3. Create an Application Using Dev Studio<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Access the Pega Platform login page\u00a0<\/li>\n<li>Log in with your operator.<\/li>\n<li>On the top of the screen, click on Application: Pega Platform \/ New Application<\/li>\n<\/ol>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"size-full wp-image-4611 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/1CreateNewApplication-1.png\" alt=\"\" width=\"540\" height=\"238\" \/><\/p>\n\n\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>Select the custom type<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"size-full wp-image-4612 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/ApplicationType.png\" alt=\"\" width=\"918\" height=\"456\" \/><\/p>\n\n\n\n\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li>Click on Use this application type<\/li>\n<li>Click on Advanced configuration<\/li>\n<li>Fill in the form as follow:\n<ul>\n<li>Application ID: MyApp<\/li>\n<li>Organization name: UICo<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-4613\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/AdvancedConf..png\" alt=\"\" width=\"632\" height=\"558\" \/><\/p>\n\n\n\n\n\n<ol class=\"wp-block-list\" start=\"8\">\n<li>Click on save<\/li>\n<li>Click on Create application<\/li>\n<li>Add two users:\n<ul>\n<li>admin@myapp \/ Administrator<\/li>\n<li>author@myapp \/ Author<\/li>\n<\/ul>\n<\/li>\n<li>Done<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">1.4. Change security policy for new users<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>On the left-hand side, click on the Records icon to display the records explorer<\/li>\n<li>Expand Organization \/ Operator ID<\/li>\n<li>Select admin@myapp from the list<\/li>\n<li>Go to the security tab and uncheck Force password change on next login<\/li>\n<li>Click on Update password and type in: rules<\/li>\n<li>Click on Save<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4614 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/OperatorSecurity.png\" alt=\"\" width=\"748\" height=\"471\" \/><\/p>\n\n\n\n\n\n<ol class=\"wp-block-list\" start=\"7\">\n<li>Repeat the steps for author@myapp<\/li>\n<li>From the bottom left-hand side, log off<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">2. Create a case type in App Studio<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">2.1. Scenario<\/h3>\n\n\n\n<p>Create a new case type to handle car insurance policy quotes.<\/p>\n\n\n\n<p>Create the data types used by the case type first then create the case type with the views associated with it.<\/p>\n\n\n\n<p>Create two data types:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Person<\/li>\n<li>Car<\/li>\n<\/ul>\n\n\n\n<p>Create a case type:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Car Insurance<\/li>\n<\/ul>\n\n\n\n<p>The data model will ultimately look like the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Client\n<ul>\n<li>First Name<\/li>\n<li>Last Name<\/li>\n<li>Date of Birth<\/li>\n<li>Marital Status<\/li>\n<li>Spouse \u2013 (Person)\n<ul>\n<li>First name<\/li>\n<li>Last name<\/li>\n<li>Date of Birth<\/li>\n<li>Age<\/li>\n<\/ul>\n<\/li>\n<li>Children \u2013 (List of Person)\n<ul>\n<li>First name<\/li>\n<li>Last name<\/li>\n<li>Date of Birth<\/li>\n<li>Age<\/li>\n<\/ul>\n<\/li>\n<li>Car \u2013 (Car)\n<ul>\n<li>Make<\/li>\n<li>Model<\/li>\n<li>Colour<\/li>\n<li>Fuel type<\/li>\n<li>Year<\/li>\n<li>Millage<\/li>\n<\/ul>\n<\/li>\n<li>Address \u2013 (Data-Address)\n<ul>\n<li>Street<\/li>\n<li>Postcode<\/li>\n<li>City<\/li>\n<li>Country<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2.2. Credentials<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Log in as author@myapp \/ rules<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2.3. Create the Person, Car and Address data types<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>From the left-hand side click on the Data icon<\/li>\n<li>Click on Data types<\/li>\n<li>From the top right-hand side click on New\n<ul>\n<li>Data type name: Person<\/li>\n<li>Define data source: Later<\/li>\n<li>Submit<\/li>\n<\/ul>\n<\/li>\n<li>Add fields\n<ul>\n<li>First Name: Text<\/li>\n<li>Last Name: Text<\/li>\n<li>Date of Birth: Date only<\/li>\n<li>Age: integer\n<ul>\n<li>Click on the gear icon and make the property to be automatically calculated<\/li>\n<li>Custom function<\/li>\n<li><code>@DateTimeDifference(.DateOfBirth+\"T000000.000\",@CurrentDateTime(),\"Y\")<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>Note:<\/strong>\u00a0If you are not familiar with configuring a view from a case life cycle, this video may help:\u00a0<a href=\"https:\/\/community.pega.com\/video-library\/how-configure-view-case-lifecycle\">How to configure a\u00a0<\/a><a href=\"https:\/\/community.pega.com\/video-library\/how-configure-view-case-lifecycle\" target=\"_blank\" rel=\"noreferrer noopener\">view\u00a0<\/a><a href=\"https:\/\/community.pega.com\/video-library\/how-configure-view-case-lifecycle\">from a case lifecycle<\/a><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li>Click on Views and create a new view<\/li>\n<li>After expanding the Fields section (on the left) we can add fields to the view by clicking on each field in the list.\n<ul>\n<li>Add the four properties just created\u00a0<\/li>\n<li>Name the view \u201cPerson Details\u201d<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4615 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Person-Data-Type.png\" alt=\"\" width=\"897\" height=\"357\" \/><\/p>\n\n\n\n\n\n<ol class=\"wp-block-list\" start=\"7\">\n<li>Submit and Save<\/li>\n<li>Add a new Data type\n<ul>\n<li>Data type name: Car<\/li>\n<li>Define data source: Later<\/li>\n<li>Submit<\/li>\n<\/ul>\n<\/li>\n<li>Go to the Views tab in order to create a UI form and the fields that don\u2019t exist yet<\/li>\n<\/ol>\n\n\n\n<p><strong>Note:<\/strong>\u00a0We could define the data model first and then reuse it when creating the views or let Pega create the fields on the fly for us.\u00a0<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"10\">\n<li>Create a new view\n<ul>\n<li>Make \u2013 Text<\/li>\n<li>Model \u2013 Text<\/li>\n<li>Colour \u2013 Text<\/li>\n<li>Fuel type \u2013 Picklist [Petrol, Diesel, Hybrid, Electric]<\/li>\n<li>Year \u2013 Text<\/li>\n<li>Millage \u2013 Integer<\/li>\n<li>Overall Condition \u2013 Integer<\/li>\n<li>Mpg \u2013 Decimal<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4616 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Car-Data-Type.png\" alt=\"\" width=\"933\" height=\"530\" \/><br \/>Figure-6: Car Data Type<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<ol class=\"wp-block-list\" start=\"11\">\n<li>Submit and save<\/li>\n<li>Click on the Data Model tab, all the properties have been created<\/li>\n<li>Add the Address data type<\/li>\n<li>Create a default view Address Details\n<ul>\n<li>Street \u2013 Text<\/li>\n<li>Postcode \u2013 Text<\/li>\n<li>City \u2013 Text<\/li>\n<li>Country \u2013 Text<\/li>\n<\/ul>\n<\/li>\n<li>Submit<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">2.4. Create the Car Insurance case type<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>From the left-hand side click on the Case types icon<\/li>\n<li>Click on New<\/li>\n<li>Name the case type \u201cCar Insurance\u201d<\/li>\n<li>Click Next<\/li>\n<li>Click on the Workflow tab then Add life cycle<\/li>\n<li>Add a stage and four steps as follow<\/li>\n<li>Hover your mouse over the stage and add a new Review Details process\n<ul>\n<li>Name: Review Details<\/li>\n<li>Add a new Collect Information step named:\u00a0 Review Details<\/li>\n<\/ul>\n<\/li>\n<li>Save<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4617 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Car-Ins-WorkFlow.png\" alt=\"\" width=\"418\" height=\"522\" \/><\/p>\n\n\n\n\n\n<ol class=\"wp-block-list\" start=\"9\">\n<li>Click on the Data model tab<\/li>\n<li>Add a field\n<ul>\n<li>Name: Client<\/li>\n<li>Type: Field group<\/li>\n<li>Options: Client (Data type)<\/li>\n<li>Click anywhere else on the form to post the changes<\/li>\n<\/ul>\n<\/li>\n<li>Click on Save<\/li>\n<li>Click on the Client link<\/li>\n<li>Add fields\n<ul>\n<li>First Name \u2013 Text<\/li>\n<li>Last Name \u2013 Text<\/li>\n<li>Date of Birth \u2013 Date only<\/li>\n<li>Marital Status \u2013 Picklist [Single, Married, Divorced]<\/li>\n<li>Spouse \u2013 Person<\/li>\n<li>Children \u2013 List of Person<\/li>\n<li>Car \u2013 Car<\/li>\n<li>Address \u2013 Address<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4618 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Client-Data-Type.png\" alt=\"\" width=\"934\" height=\"577\" \/><\/p>\n\n\n\n\n\n<p><strong>Note:<\/strong>\u00a0A field group means a single page which is an instance of a class.<br \/>A field group (list) means a page list which is a list of instances of a class, such as List()<br \/>A Data Reference means that the wizard will use an existing Data Type (Sourced data class with Data Pages) to create:\u00a0<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A lookup control (dropdown or autocomplete) in order to select one particular entry for the data type\u00a0<\/li>\n<li>A form based on a field group (page) that references this unique data type entry and displays it using the form reused or generated.<\/li>\n<\/ul>\n\n\n\n<p>Data referencing allows user to quickly render the selection of one entry of the data type and dynamically display\/refresh the content of this entry which is referenced by a page.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2.5. Create the Car Insurance UI<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Return to the case type life cycle<\/li>\n<li>Configure the views for the first step of the case\n<ul>\n<li>Select Client<\/li>\n<li>Click Configure View<\/li>\n<li>Create a new view: Client Details\n<ul>\n<li>Delete all fields<\/li>\n<li>Add a field: Has Children \u2013 Boolean<\/li>\n<li>Add Children<\/li>\n<li>Remove the Age<\/li>\n<li>Submit and Save<\/li>\n<\/ul>\n<\/li>\n<li>Reconfigure the view<\/li>\n<li>For Client, select Create new view: Client Info\n<ul>\n<li>Remove Has Children<\/li>\n<li>Submit and Save<\/li>\n<\/ul>\n<\/li>\n<li>Reconfigure the view<\/li>\n<li>For Client, select Create new view: Client Spouse Container\n<ul>\n<li>Delete all fields<\/li>\n<li>Add Spouse and use the Person Details view<\/li>\n<li>Submit and Save<\/li>\n<\/ul>\n<\/li>\n<li>Reconfigure the view<\/li>\n<li>For Client, select Create new view: Client Details<\/li>\n<li>Submit and save<\/li>\n<\/ul>\n<\/li>\n<li>Verify your work and click on Views<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4621 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Client-Details.png\" alt=\"\" width=\"756\" height=\"320\" \/>Figure-9: Client Details<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4620 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Client-Info-1.png\" alt=\"\" width=\"633\" height=\"250\" \/>\n<figcaption>Figure-10: Client Info<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Client Spouse Container<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4622 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Client-Spouse-Cont.png\" alt=\"\" width=\"766\" height=\"122\" \/>Figure-11: Client Spouse Container<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>Organize the views you have just created\n<ul>\n<li>Click on Save and run<\/li>\n<li>Click on Done<\/li>\n<li>Hover your mouse over the view<\/li>\n<li>Click on Configure view with the pencil icon (in orange in the right corner)<\/li>\n<li>On the right panel, hover your mouse over the Client Details section and click on the pencil<\/li>\n<li>Click the + for the A column<\/li>\n<li>Add Client Spouse Container and click on X<\/li>\n<li>Drag and drop the section at the very top of Client Details<\/li>\n<li>Click on the pencil for Client Spouse Container<\/li>\n<li>Add the Client Info section<\/li>\n<li>Drag and drop it at the top<\/li>\n<li>Submit and Save<\/li>\n<\/ul>\n<\/li>\n<li>Verify your work and run a case<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4623 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/First-UI-for-Client.png\" alt=\"\" width=\"968\" height=\"825\" \/>Figure-12: First UI for Client\u00a0<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<ol class=\"wp-block-list\" start=\"6\">\n<li>Configure the view for the second step\n<ul>\n<li>Select Client<\/li>\n<li>Create a new view: Car Details<\/li>\n<li>Delete all the properties and add Car<\/li>\n<li>Select Car Details<\/li>\n<li>Submit and save<\/li>\n<\/ul>\n<\/li>\n<li>Configure the view for the third step\n<ul>\n<li>Select Client<\/li>\n<li>Create a new view: Address Details<\/li>\n<li>Delete all the properties and add Address<\/li>\n<li>Select Address Details<\/li>\n<li>Submit and save<\/li>\n<\/ul>\n<\/li>\n<li>For the Review Details step\n<ul>\n<li>Add the Collect Client Details View<\/li>\n<li>Add the Collect Car Details view<\/li>\n<li>Add the Collect Address Details view<\/li>\n<li>Make them all Read-only<\/li>\n<li>Remove the empty field<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4624 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/First-UI-for-Car.png\" alt=\"\" width=\"682\" height=\"650\" \/>Figure-13: First UI for Car<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4625 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/First-UI-for-Address.png\" alt=\"\" width=\"677\" height=\"393\" \/>Figure-14: First UI for Address<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4626 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Fisrt-UI-for-Review.png\" alt=\"\" width=\"569\" height=\"916\" \/>Figure-15: First UI for Review<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">3. Make the UI dynamic<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">3.1. Scenario<\/h3>\n\n\n\n<p>The first draft of UI is only using stacked templates and we want to change the appearance of the UI and give it a modern look &amp; feel.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Remove the Age from the Children and Spouse UI. This should only appear in the Review Details view.<\/li>\n<li>Display the spouse information only when the client is \u201cMarried\u201d<\/li>\n<li>Change the marital Status to use Radio buttons<\/li>\n<li>Display the Children table only when the client \u201cHas Children\u201d\u00a0<\/li>\n<li>Use a Slider for the Overall Condition of the Car<\/li>\n<li>Hide Mpg when the Car is Electric\u00a0<\/li>\n<li>Use a country picklist for the country of the Address<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3.2. Credentials<\/h3>\n\n\n\n<p>\u2022 Log in as author@myapp \/ rules<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3.3. Client UI<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Run a case<\/li>\n<li>On the top right-hand side of the UI click on Configure this view<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4627 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Client-View-Conf..png\" alt=\"\" width=\"1099\" height=\"495\" \/>Figure-16: Client View Configuration<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>On the right-hand side click on Client Details \u2013 pencil<\/li>\n<li>Click on Client Spouse Container \u2013 pencil<\/li>\n<li>Click on Person Details (pencil) to edit the Spouse section<\/li>\n<li>At the top, click on Settings<\/li>\n<li>On the Visibility part select\n<ul>\n<li>Condition (Expression)<\/li>\n<li><code>.MaritalStatus='Married'<\/code><\/li>\n<li>Apply<\/li>\n<li>Click the X to get back twice<\/li>\n<\/ul>\n<\/li>\n<li>Click on Children pencil\u00a0<\/li>\n<li>At the top, click on Settings<\/li>\n<li>On the Visibility part select\n<ul>\n<li>Condition (Expression)<\/li>\n<li><code>.HasChildren<\/code><\/li>\n<li>Apply<\/li>\n<li>Click the X to get back<\/li>\n<li>Hover the mouse over the Children and select Modify this list<\/li>\n<li>Put the Date of Birth at the bottom<\/li>\n<\/ul>\n<\/li>\n<li>Click the X to get back<\/li>\n<li>Navigate back to Person Details\n<ul>\n<li>Select Married for the Marital Status so the section appears and is modifiable<\/li>\n<li>Client Details<\/li>\n<li>Client Spouse Container<\/li>\n<li>Person Details<\/li>\n<li>Click on the Age \u2013 pencil\n<ul>\n<li>Visibility: Condition (Expression)<\/li>\n<li>Condition:\u00a0<code>.DateOfBirth!=''<\/code>\u00a0(these are 2 single quotes)<\/li>\n<\/ul>\n<\/li>\n<li>Click on Date of Birth \u2013 pencil\n<ul>\n<li>Add action sets<\/li>\n<li>Add an event : Change<\/li>\n<li>Add an action: Diplay: Refresh<\/li>\n<li>Ok, Apply and click on the X twice<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Try the result by running a new case or refreshing the current one<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Client Final Result<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Lite Version<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4628 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Client-Lite-Version.png\" alt=\"\" width=\"683\" height=\"352\" \/>Figure-17: Client Lite Version<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>Full Version<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4629 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Client-Full-Version.png\" alt=\"\" width=\"918\" height=\"776\" \/>Figure-18: Client Full Version<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">3.4. Car UI<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Change the visibility of the MPG field to be hidden when the Car fuel type is Electric\n<ul>\n<li>Use previously learned knowledge to perform this task\u00a0<\/li>\n<li>Delete Colour<\/li>\n<li>Move up the MPG to be just below Fuel Type<\/li>\n<\/ul>\n<\/li>\n<li>Change the Overall Condition to use a slider control\n<ul>\n<li>From the Car Details section settings, delete the Overall Condition field using the 3 dots at the far right<\/li>\n<li>Click on the + above and add a Slider control and then click on the X<\/li>\n<li>Edit the Slider field as following<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4630 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Slider-Control-Conf..png\" alt=\"\" width=\"288\" height=\"485\" \/>Figure-19: Slider Control Configuration<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Car Final Result<\/h4>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4631 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Car-UI.png\" alt=\"\" width=\"674\" height=\"534\" \/>Figure-20: Car UI<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">3.5. Address UI<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Change Country to be a picklist\n<ul>\n<li>Open the Address data type<\/li>\n<li>Double click on Country<\/li>\n<li>Click on the Change link and select Picklist<\/li>\n<li>Save<\/li>\n<li>Go to the Views tab and open the Address Details<\/li>\n<li>Click on the cog<\/li>\n<li>Select Autocomplete<\/li>\n<li>Add countries :\n<ul>\n<li>Turkey<\/li>\n<li>\u2026<\/li>\n<\/ul>\n<\/li>\n<li>Submit and save<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Address Final Result<\/h4>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4632 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Address-UI.png\" alt=\"\" width=\"691\" height=\"386\" \/>Figure-21: Address UI<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">3.6. Review Details UI<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Change the Read-Only format of the Has Children checkbox<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4633 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Checkbox-Conf..png\" alt=\"\" width=\"287\" height=\"564\" \/>Figure-22: Checkbox Configuration<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>You can search for: \u201cchecked\u201d and \u201cerror\u201d to find the images to associate with the value of the field<\/li>\n<\/ol>\n\n\n\n<p>You can see the final result by running the case.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Change the UI Templates<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.1. Scenario<\/h3>\n\n\n\n<p>Time to change the overall display of the version sections using design templates.<br \/>We will finish off the design of the different views by ensuring all fields are rendered correctly for when both editable and read-only.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.2. Credentials<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Log in as author@myapp \/ rules<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4.3. Client UI<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select Married as of the Marital Status so then you can see the Spouse section when modifying the UI<\/li>\n<li>Check Has Children as well<\/li>\n<li>Click on Configure this view<\/li>\n<li>Open Client Details<\/li>\n<li>Open Client Spouse Container\n<ul>\n<li>Change the design template to 2 column<\/li>\n<li>Drag the Person Details to the B column<\/li>\n<\/ul>\n<\/li>\n<li>Open the Client Details and click on Settings\n<ul>\n<li>Remove the header<\/li>\n<\/ul>\n<\/li>\n<li>Open the Client Info and click on Settings\n<ul>\n<li>Add a header \u201cClient\u201d<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4634 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Car-UI-with-column-template.png\" alt=\"\" width=\"1100\" height=\"405\" \/>Figure-23: Client UI with column template\u00a0<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">4.4. Car UI<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Use previously learned knowledge to perform this task<\/li>\n<li>Change the of Car Details Template to be 2 Column (Inline Wrapping)<\/li>\n<li>Ensure the layout do not change when selecting Electric for Fuel type<\/li>\n<li>Get rid of the Client header<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4637 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Car-UI-with-column-template-1.png\" alt=\"\" width=\"1100\" height=\"405\" \/>Figure-24: Car UI with column template\u00a0<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">4.5. Address UI<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Use previously learned knowledge to perform this task<\/li>\n<li>Change the of Address Details Template to be 2 Column<\/li>\n<li>Get rid of the Client header<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-full is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4635 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Address-UI-with-column-template.png\" alt=\"\" width=\"1098\" height=\"243\" \/>Figure-25: Address UI with column template\u00a0<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">4.6. Review Details UI<\/h3>\n\n\n\n<p>Make sure all the numbers are displayed on the left when read-only<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Change the UI Theme<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">5.1. Scenario<\/h3>\n\n\n\n<p>Time to play with themes and change the branding of the application.<\/p>\n\n\n\n<p>This exercise let you be inventive in terms of color used<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5.2. Credentials<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Log in as author@myapp \/ rules<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">5.3. Play with the Themes<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>On the left-hand side, click on Settings<\/li>\n<li>Click on Theme<\/li>\n<li>Check the name of the application<\/li>\n<li>Change the logo<\/li>\n<li>Change the default theme with the values you wish to style your application<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-large is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4636 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Application-Theme-1024x423-1.png\" alt=\"\" width=\"1024\" height=\"423\" \/>Figure-26: Application Theme<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<p>After that, you can back to the portal or case and see the effect of the changes.<\/p>\n\n\n\n<p>Before starting the Pega Web Mashup, this application will suffice for now. If you wish, you can enrich it with alternative scenarios and steps.<\/p>\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n<h2 class=\"wp-block-heading\">6. What is Mashup in the industry?<\/h2>\n\n\n\n<p>A mashup (computer industry jargon), in web development, is a web page or web application that uses content from more than one source to create a single new service displayed in a single graphical interface. Mashups are made possible via Web services or public APIs that (generally) allow free access. Most mashups are visual and interactive in nature.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. Pega Web Mashup<\/h2>\n\n\n\n<p>Pega Web Mashup enables us to embed a Pega application within a web page or other web applications on your intranet or internet site. You create a Pega Web Mashup directly in App Studio or Dev Studio and deploy it to leverage the security and user interface features of the Pega Platform\u2122.<\/p>\n\n\n\n<p>Mashups generated by Pega Web Mashup provide the same rich application experience users normally have in a Pega Platform application. Common actions that can be defined inside a mashup include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Opening a new case<\/li>\n<li>Displaying a user\u2019s worklist<\/li>\n<li>Selecting and performing an assignment<\/li>\n<\/ul>\n\n\n\n<p>The\u00a0Generate Mashup code\u00a0option opens a window that provides the necessary HTML for you to copy, paste, and view within the web page. You can modify the code to meet the specific needs of the web page or to customize the appearance of the mashup, for example, setting the width of the mashup.<\/p>\n\n\n\n<p>Pega Web Mashup code is HTML5-compliant. The application can communicate with the host page where the mashup code is embedded, and host pages can communicate actions back to the Pega Platform application as well.<\/p>\n\n\n\n<p>When a Pega Web Mashup displays a Pega application, the application starts by calling a flow or a harness. Anything that you can display in a harness is visible in the web mashup application, including access worklists and reports.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. Using Mashup to expose a case type<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">8.1. Scenario<\/h3>\n\n\n\n<p>In our application for Car Insurance, we want to quickly expose our Service Request case type to customers through Web Self-Service (WSS) by using Pega Mashup.<\/p>\n\n\n\n<p>Create a Mashup channel interface and expose this Mashup through a web HTML page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">8.2. Credentials<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pega: author@myapp \/ rules<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">8.3. Use Mashup preview in App Studio<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the left navigation panel of App Studio, click Interfaces and then Mashup to create a new Mashup channel interface.<\/li>\n<li>Populate the form as follow:\n<ul>\n<li>Name: Car Insurance<\/li>\n<li>Description: Create a new Car Insurance<\/li>\n<li>URL: Leave it as is<\/li>\n<li>Action: Leave it as is<\/li>\n<li>Case type: Car Insurance<\/li>\n<li>Flow name: pyStartCase<\/li>\n<\/ul>\n<ul>\n<li>Thread name: Leave it as it is<\/li>\n<li>Skin: Leave it as it is<\/li>\n<\/ul>\n<\/li>\n<li>Close the form<\/li>\n<li>In the upper right, click Save to persist the new interface.<\/li>\n<li>Under \u201cWhat is a Mashup?\u201d click \u201cGenerate mashup code\u201d.<\/li>\n<\/ol>\n\n\n\n<p><strong>Note:<\/strong>\u00a0pyStartCase is the default flow name Pega uses to create any case.\u00a0<\/p>\n\n\n\n<p>According to the configuration, the mashup code will occur in the relevant field.<\/p>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-large is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4638 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Mashup-Interface-1024x475-1.png\" alt=\"\" width=\"1024\" height=\"475\" \/>Figure-27: Mashup Interface<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- ********************** Begin Pega content ********************** --&gt;\n&lt;script src ='https:\/\/paex21-use.pegacloud.io\/prweb\/?pyActivity=pzIncludeMashupScripts'&gt;&lt;\/script&gt;\n&lt;div data-pega-gadgetname ='PegaGadget' \ndata-pega-action ='createNewWork' \ndata-pega-action-param-classname ='UICo-MyApp-Work-CarInsurance' \ndata-pega-action-param-flowname ='pyStartCase' \ndata-pega-isdeferloaded ='false' \ndata-pega-applicationname ='MyApp' \ndata-pega-threadname ='STANDARD' \ndata-pega-resizetype ='stretch' \ndata-pega-url ='https:\/\/paex21-use.pegacloud.io\/prweb\/' \ndata-pega-tenantid ='P_RES_C1225Ex21AM_264' \ndata-pega-redirectguests ='true' &gt;&lt;\/div&gt;\n\n&lt;!-- ********************** End Pega content ********************** --&gt;<\/code><\/pre>\n\n\n\n<p>Our mashup code is ready to be embedded in a host website.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"6\">\n<li>Copy the mashup code, we will need it in the next posts.<\/li>\n<li>In the App Studio header, click Back to preview to return to the preview mode.<\/li>\n<li>Click the Case Manager menu in the App Studio header<\/li>\n<li>Select the new Car Insurance channel interface. The application renders the Mashup preview.<\/li>\n<li>Run the case.<\/li>\n<\/ol>\n\n\n\n<p><strong>Note:<\/strong>\u00a0Mashup Interface can be configured with different actions such as display specific harness, open assignment, open work item, etc. However, when the action is changed, Mashup Code must be generated again.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">9. Creating a mashup demo<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">9.1. Scenario<\/h3>\n\n\n\n<p>Now, we want to embed the mashup within the Pega Community (or any) website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">9.2. Credentials<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pega: author@myapp \/ rules<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">9.3. Previewing the mashup<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>After you configure your mashup, use the preview function to see how it is displayed on a page.<\/li>\n<li>In the App Studio header, click\u00a0Back to preview.<\/li>\n<li>In the App Studio header, next to the name of your application, expand the interfaces list, and then click\u00a0Car Insurance.<\/li>\n<li>In the\u00a0Preview mode\u00a0field, select\u00a0the Live website\u00a0from the list.<\/li>\n<li>In the\u00a0Website URL\u00a0field, enter\u00a0any URL (<a href=\"https:\/\/community.pega.com\/\">https:\/\/community.pega.com\/<\/a>)<\/li>\n<li>Turn on the\u00a0Load in a popup\u00a0toggle and click\u00a0Apply.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-large is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4639 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Place-Selection-1024x374-1.jpeg\" alt=\"\" width=\"1024\" height=\"374\" \/>Figure-28: Place Selection<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<ol class=\"wp-block-list\" start=\"7\">\n<li>In the pop-up window, click the page to display wireframes, select a place, and click to insert your mashup.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-image\" style=\"text-align: center;\">\n<figure class=\"aligncenter size-large is-resized\">\n<figcaption><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4640 aligncenter\" src=\"https:\/\/bentego.com\/wp-content\/uploads\/2020\/09\/Embedded-Mashup-1024x612-1.jpeg\" alt=\"\" width=\"1024\" height=\"612\" \/>Figure-29: Embedded Mashup<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<p>..and our application interface will appear within the website as in Figure-29.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">10. Result<\/h2>\n\n\n\n<p>Thus, we created a Pega Web Mashup Interface on App Studio for our sample application and simulated how our application will look on a live web page. We will use the code we created in subsequent posts to embed it in the HTML code of our sample website. We will also focus on application permissions, authentication and mashup pitfalls.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">References<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/academy.pega.com\/library\/8\/ui-bootcamp\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/academy.pega.com\/library\/8\/ui-bootcamp<\/a>\u00a0\u2013 Damien Renier, Pegasystems<\/li>\n<li><a href=\"https:\/\/community.pega.com\/knowledgebase\/articles\/pega-web-mashup\/creating-mashup-demo\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/community.pega.com\/knowledgebase\/articles\/pega-web-mashup\/creating-mashup-demo<\/a><\/li>\n<li><a href=\"https:\/\/community.pega.com\/knowledgebase\/articles\/pega-web-mashup\/pega-web-mashup\">https:\/\/community.pega.com\/knowledgebase\/articles\/pega-web-mashup\/pega-web-mashu<\/a><a href=\"https:\/\/community.pega.com\/knowledgebase\/articles\/pega-web-mashup\/pega-web-mashup\" target=\"_blank\" rel=\"noreferrer noopener\">p<\/a><\/li>\n<li><a href=\"https:\/\/en.wikipedia.org\/wiki\/Mashup_(web_application_hybrid)\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/en.wikipedia.org\/wiki\/Mashup_(web_application_hybrid)<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Hello, In our first Pega post, we will introduce to Pega Web Mashup, which will increase the accessibility of our Pega applications. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":5924,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[87],"tags":[135,168,169],"class_list":["post-6136","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-pega-tr","tag-pega-web-mashup-tr","tag-user-interface-tr"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introduction to Pega Web Mashup - Bentego<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction to Pega Web Mashup - Bentego\" \/>\n<meta property=\"og:description\" content=\"Hello, In our first Pega post, we will introduce to Pega Web Mashup, which will increase the accessibility of our Pega applications. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/\" \/>\n<meta property=\"og:site_name\" content=\"Bentego\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-14T13:38:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-20T16:09:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bentego.com\/wp-content\/uploads\/2025\/06\/Frame-84__.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2400\" \/>\n\t<meta property=\"og:image:height\" content=\"1600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bentego\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bentego\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/\"},\"author\":{\"name\":\"Bentego\",\"@id\":\"https:\/\/bentego.com\/tr\/#\/schema\/person\/0348418b7b0cbca83fdd7a899d54821e\"},\"headline\":\"Introduction to Pega Web Mashup\",\"datePublished\":\"2020-09-14T13:38:56+00:00\",\"dateModified\":\"2025-10-20T16:09:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/\"},\"wordCount\":3034,\"publisher\":{\"@id\":\"https:\/\/bentego.com\/tr\/#organization\"},\"image\":{\"@id\":\"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/bentego.com\/wp-content\/uploads\/2025\/06\/Frame-84__.png\",\"keywords\":[\"Pega\",\"Pega Web Mashup\",\"User Interface\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"tr\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/\",\"url\":\"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/\",\"name\":\"Introduction to Pega Web Mashup - Bentego\",\"isPartOf\":{\"@id\":\"https:\/\/bentego.com\/tr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/bentego.com\/wp-content\/uploads\/2025\/06\/Frame-84__.png\",\"datePublished\":\"2020-09-14T13:38:56+00:00\",\"dateModified\":\"2025-10-20T16:09:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/#primaryimage\",\"url\":\"https:\/\/bentego.com\/wp-content\/uploads\/2025\/06\/Frame-84__.png\",\"contentUrl\":\"https:\/\/bentego.com\/wp-content\/uploads\/2025\/06\/Frame-84__.png\",\"width\":2400,\"height\":1600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/bentego.com\/tr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introduction to Pega Web Mashup\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/bentego.com\/tr\/#website\",\"url\":\"https:\/\/bentego.com\/tr\/\",\"name\":\"Bentego\",\"description\":\"Turning data into enterprise value\",\"publisher\":{\"@id\":\"https:\/\/bentego.com\/tr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/bentego.com\/tr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/bentego.com\/tr\/#organization\",\"name\":\"Bentego\",\"url\":\"https:\/\/bentego.com\/tr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/bentego.com\/tr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/bentego.com\/wp-content\/uploads\/2025\/05\/logo-bentego.svg\",\"contentUrl\":\"https:\/\/bentego.com\/wp-content\/uploads\/2025\/05\/logo-bentego.svg\",\"width\":433,\"height\":109,\"caption\":\"Bentego\"},\"image\":{\"@id\":\"https:\/\/bentego.com\/tr\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/bentego.com\/tr\/#\/schema\/person\/0348418b7b0cbca83fdd7a899d54821e\",\"name\":\"Bentego\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introduction to Pega Web Mashup - Bentego","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/","og_locale":"tr_TR","og_type":"article","og_title":"Introduction to Pega Web Mashup - Bentego","og_description":"Hello, In our first Pega post, we will introduce to Pega Web Mashup, which will increase the accessibility of our Pega applications. [&hellip;]","og_url":"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/","og_site_name":"Bentego","article_published_time":"2020-09-14T13:38:56+00:00","article_modified_time":"2025-10-20T16:09:39+00:00","og_image":[{"width":2400,"height":1600,"url":"https:\/\/bentego.com\/wp-content\/uploads\/2025\/06\/Frame-84__.png","type":"image\/png"}],"author":"Bentego","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Bentego","Tahmini okuma s\u00fcresi":"20 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/#article","isPartOf":{"@id":"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/"},"author":{"name":"Bentego","@id":"https:\/\/bentego.com\/tr\/#\/schema\/person\/0348418b7b0cbca83fdd7a899d54821e"},"headline":"Introduction to Pega Web Mashup","datePublished":"2020-09-14T13:38:56+00:00","dateModified":"2025-10-20T16:09:39+00:00","mainEntityOfPage":{"@id":"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/"},"wordCount":3034,"publisher":{"@id":"https:\/\/bentego.com\/tr\/#organization"},"image":{"@id":"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/#primaryimage"},"thumbnailUrl":"https:\/\/bentego.com\/wp-content\/uploads\/2025\/06\/Frame-84__.png","keywords":["Pega","Pega Web Mashup","User Interface"],"articleSection":["Blog"],"inLanguage":"tr"},{"@type":"WebPage","@id":"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/","url":"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/","name":"Introduction to Pega Web Mashup - Bentego","isPartOf":{"@id":"https:\/\/bentego.com\/tr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/#primaryimage"},"image":{"@id":"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/#primaryimage"},"thumbnailUrl":"https:\/\/bentego.com\/wp-content\/uploads\/2025\/06\/Frame-84__.png","datePublished":"2020-09-14T13:38:56+00:00","dateModified":"2025-10-20T16:09:39+00:00","breadcrumb":{"@id":"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/#primaryimage","url":"https:\/\/bentego.com\/wp-content\/uploads\/2025\/06\/Frame-84__.png","contentUrl":"https:\/\/bentego.com\/wp-content\/uploads\/2025\/06\/Frame-84__.png","width":2400,"height":1600},{"@type":"BreadcrumbList","@id":"https:\/\/bentego.com\/tr\/introduction-to-pega-web-mashup\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bentego.com\/tr\/"},{"@type":"ListItem","position":2,"name":"Introduction to Pega Web Mashup"}]},{"@type":"WebSite","@id":"https:\/\/bentego.com\/tr\/#website","url":"https:\/\/bentego.com\/tr\/","name":"Bentego","description":"Turning data into enterprise value","publisher":{"@id":"https:\/\/bentego.com\/tr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bentego.com\/tr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":"Organization","@id":"https:\/\/bentego.com\/tr\/#organization","name":"Bentego","url":"https:\/\/bentego.com\/tr\/","logo":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/bentego.com\/tr\/#\/schema\/logo\/image\/","url":"https:\/\/bentego.com\/wp-content\/uploads\/2025\/05\/logo-bentego.svg","contentUrl":"https:\/\/bentego.com\/wp-content\/uploads\/2025\/05\/logo-bentego.svg","width":433,"height":109,"caption":"Bentego"},"image":{"@id":"https:\/\/bentego.com\/tr\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/bentego.com\/tr\/#\/schema\/person\/0348418b7b0cbca83fdd7a899d54821e","name":"Bentego"}]}},"_links":{"self":[{"href":"https:\/\/bentego.com\/tr\/wp-json\/wp\/v2\/posts\/6136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bentego.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bentego.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bentego.com\/tr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bentego.com\/tr\/wp-json\/wp\/v2\/comments?post=6136"}],"version-history":[{"count":1,"href":"https:\/\/bentego.com\/tr\/wp-json\/wp\/v2\/posts\/6136\/revisions"}],"predecessor-version":[{"id":6260,"href":"https:\/\/bentego.com\/tr\/wp-json\/wp\/v2\/posts\/6136\/revisions\/6260"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bentego.com\/tr\/wp-json\/wp\/v2\/media\/5924"}],"wp:attachment":[{"href":"https:\/\/bentego.com\/tr\/wp-json\/wp\/v2\/media?parent=6136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bentego.com\/tr\/wp-json\/wp\/v2\/categories?post=6136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bentego.com\/tr\/wp-json\/wp\/v2\/tags?post=6136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}