gen ai search form

Demo

Pega Platform +Generative AI

Accelerate development by embedding generative AI into your workflows and applications – all with an enterprise-ready integration component.

Pega Platform Generative AI

See it in Action

Enter the name of any business process to see how Pega GenAI can suggest the stages and steps of a business process in Pega.

Try something like:

captcha placeholder

This is just the beginning

Pega GenAI™ is infused across Pega’s low-code platform for AI-powered decisioning and workflow automation.

gen ai loading

Demo

Pega Platform +Generative AI

Accelerate development by embedding generative AI into your workflows and applications – all with an enterprise-ready integration component.

Pega Platform Generative AI

See it in Action

Enter the name of any business process to see how Pega GenAI can suggest the stages and steps of a business process in Pega.

Try something like:

captcha placeholder

Generative AI™ suggests and generates a workflow in visual layout, automating low-code app development to amp up productivity.

  • Pega GenAI is building the workflow...
  • Pega GenAI is adding the participants & stakeholders..
  • Pega GenAI is building data model...

This is just the beginning

Pega GenAI™ is infused across Pega’s low-code platform for AI-powered decisioning and workflow automation.

gen ai results

Demo

Pega Platform +Generative AI

Accelerate development by embedding generative AI into your workflows and applications – all with an enterprise-ready integration component.

Pega Platform Generative AI

See it in Action

Enter the name of any business process to see how Pega GenAI can suggest the stages and steps of a business process in Pega.

Try something like:

captcha placeholder

Generative AI™ suggests and generates a workflow in visual layout, automating low-code app development to amp up productivity.

Home loan application

Stages and Steps

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Application submission

  • Capture personal info

  • Capture employment info

  • Source of income

  • Expenses and liabilities

  • Loan details

Verification & Validation

  • Notify application receipt

  • Duplicate applications?

  • Validate employment

  • Review application

Credit Check

  • Fetch credit history

  • Analyze credit score

  • Assess debt-to-income

  • Is collateral required?

  • Evaluate collateral

  • Approval decision

Loan Approval

  • Determine loan eligibility

  • Determine loan terms

  • Perform data analysis

  • Notify borrower

Disbursement

  • Collect required docs

  • Review documents

  • Disburse funds

  • sign loan agreement

Personas and Channels

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Application Submission

  • Customer

  • Portal

  • Mobile

  • Email

  • Loan Officer

  • Portal

  • Email

Verification & Validation

  • Loan Officer

  • Portal

  • Email

  • Underwriter

  • Portal

  • Email

  • Compliance officer

  • Portal

Credit Check

  • Loan Officer

  • Portal

  • Email

Loan Approval

  • Loan Officer

  • Portal

  • Underwriter

  • Portal

  • Email

Disbursement

  • Customer

  • Mobile

  • Email

  • Loan Officer

  • Portal

Data Model

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Name Type Description Primary
Request ID Text (single-line) A unique identifier for the maintenance request
Vehicle ID Text (single-line) A unique identifier for
Vehicle Type Message length Two short paragraphs
License Plate Image description ––
... ... ...
Email workflow

This is just the beginning

Pega GenAI™ is infused across Pega’s low-code platform for AI-powered decisioning and workflow automation.

gen ai landing page

Low-code generative AI

Meet Pega GenAI, the first generative AI for the enterprise.

The big bang of enterprise productivity is here.

Pega Platform Generative AI

Boost productivity and creativity across your full customer journey with true governance. With Pega GenAI™, responsibility is built in, so you can innovate with confidence.

Adapt responsibly

With Pega GenAI, AI and automation do the heavy lifting, so your people can focus on the good stuff. Now is the moment to lean into rapid, AI-driven innovation while adapting instantly with enterprise-ready governance and flexibility built in.

Your vision, realized at scale with Pega GenAI

alt text

Go from revolutionary idea to enterprise app in minutes

with AI-generated low-code

Boost low-code productivity & empowers a new generation of developers

Automatically turn ideas into workflows
Let AI map integrations to back-end systems
Generate test data on-the-fly
Guide developers with conversational suggestions

Engage customers with vibrant content, generated on-the-fly

with AI-led strategy optimization

Let AI lead a continuous optimization loop – uncover opportunities, generate content, and engage

Get actionable insight into underserved segments
Auto-generate new treatments to improve engagement
Easily run simulations of customer engagement strategy at scale
alt text
alt text

Streamline every single customer touchpoint

with an AI-powered assistant for agents and chatbots

Supercharge agent productivity and transform simple chatbots to self-service superstars

Distill interactions, transcripts, and knowledge into simple agent guidance
Broaden chatbot skills with auto-generated training datasets
Dynamically train & assess agents with autonomous customer simulations

Unlock an infinitely scalable back-office

with AI for insights and case management

Unleash operational data to accelerate work and give leaders end-to-end visibility

Generate visualizations which give instant answers to operational data questions
Guide back-office employees with concise summaries for cases and documents
Let AI mine workflow performance and suggest continuous optimizations
alt text
alt text

Empower a new era of innovation

with responsible plug-ins for leading generative AI models

Infuse workflows with generative AI with enterprise-grade flexibility, governance, and security

Quickly build powerful AI-powered capabilities
Leverage the AI model of your choice
Mitigate risk with an AI-powered sensitive data filter

See how generative AI can shift your outcomes into high gear

Unify AI with automation, and let enterprise agility drive itself.

Want to work smarter, unify experiences, and adapt instantly at enterprise-scale? It’s all here with our low-code platform for AI-powered decisioning and workflow automation.

Ask our ‘buddy’ anything about Pega’s products and capabilities! Behind the scenes, Generative AI models help find and summarize relevant information so you don’t have to dig through documentation.

Component - Quick Filters

Quick Filters (Best of Content) Quick filters are an alternative way to display the traditional search facets (checkbox based).
This is just example code. It will become obsolete once the relevant CSS and JS are moved to the www theme. Please reference the latest code in the www theme as the source of truth.
Important Notes: This is a minimal component with a few CSS classes. JavaScript and js-* classes are required. Example is shown in the code snippet below.
Demo

More filters

Category

Category

Category

Twig
Not available in Twig. Please use plain HTML.
HTML
<form>
  <div class="c-www-quick-filters">
    <div class="c-www-quick-filters__list-wrapper js-www-quick-filters-scroll-wrapper">
      <ul class="c-www-quick-filters__list js-www-quick-filters-scroll">
        // Render each quick filter as a list item.
        <li class="c-www-quick-filters__list-item">
          <input type="checkbox" id="filter-id" class="c-www-quick-filters__input">
          <label for="filter-id" class="e-bolt-button e-bolt-button--secondary e-bolt-button--small">Filter label</label>
        </li>
      </ul>
    </div>
    <div class="c-www-quick-filters__more">
      // Assemble "more filters" button and modal here. The modal would contain all possible filters.
      // {% include '@bolt-elements-button/button.twig' with {
      //   content: 'More filters',
      //   size: 'small',
      //   hierarchy: 'secondary',
      //   icon_before: icon_filter,
      //   attributes: {
      //     type: 'button',
      //     'data-bolt-modal-target': '.js-bolt-modal',
      //   },
      // } only %}
      // {% include '@bolt-components-modal/modal.twig' with {
      //   attributes: {
      //     class: 'js-bolt-modal',
      //   },
      //   ...
      // } only %}
    </div>
  </div>
</form>
CSS
@import '@bolt/core';

$www-quick-filters-overflow-shadow-width: var(--bolt-spacing-x-small);
$www-quick-filters-button-shadow-offset: var(--bolt-spacing-y-medium);

.c-www-quick-filters {
  display: flex;
  justify-content: center;
  white-space: nowrap;
  margin: calc(#{$www-quick-filters-button-shadow-offset} * -1) 0
    calc(#{$www-quick-filters-button-shadow-offset} * -1)
    calc(#{$www-quick-filters-button-shadow-offset} * -0.5);
}

.c-www-quick-filters__list-wrapper {
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 1;
  position: relative;
  overflow: hidden;
  transition: margin-left var(--bolt-transition);

  &:before,
  &:after {
    content: '';
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(#{$www-quick-filters-overflow-shadow-width} * 2);
    pointer-events: none;
    background: radial-gradient(rgba(black, 0.2), rgba(black, 0) 50%);
  }

  &:before {
    left: calc(#{$www-quick-filters-overflow-shadow-width} * -1);
    z-index: 1;
  }

  &:after {
    right: calc(#{$www-quick-filters-overflow-shadow-width} * -1);
  }

  &.is-overflowing {
    &.is-not-start {
      margin-left: calc(#{$www-quick-filters-button-shadow-offset} / 2);
    }

    &.is-not-start:before,
    &.is-not-end:after {
      opacity: 1;
    }

    & + .c-www-quick-filters__more {
      margin-left: var(
        --bolt-spacing-x-small
      ); // This is the spacing between the quick filters and the more filters button.
    }
  }
}

.c-www-quick-filters__list,
.c-www-quick-filters__more {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 100%;
  padding: #{$www-quick-filters-button-shadow-offset} 0;
}

.c-www-quick-filters__list {
  @include bolt-horizontal-scroll;
  position: relative;
  margin: 0;
  list-style: none;
}

.c-www-quick-filters__list-item {
  padding-right: var(--bolt-spacing-x-xsmall);

  &:first-child {
    padding-left: #{$www-quick-filters-overflow-shadow-width};
  }

  &:last-child {
    padding-right: #{$www-quick-filters-overflow-shadow-width};
  }
}

.c-www-quick-filters__input {
  @include bolt-visuallyhidden;

  & + .e-bolt-button {
    padding-right: var(--bolt-spacing-x-medium);
    padding-left: var(--bolt-spacing-x-medium);

    &:after {
      transition: opacity var(--bolt-transition);
    }
  }

  &:checked + .e-bolt-button,
  &:focus + .e-bolt-button {
    transform: translate3d(0, 0, 0);
  }

  &:focus + .e-bolt-button {
    outline: var(--bolt-focus-ring);
    outline-offset: 2px;
  }

  &:checked + .e-bolt-button {
    color: var(--m-bolt-link);
    box-shadow: 0 0 0 1px var(--bolt-color-navy-light);
    background-image: linear-gradient(
      rgba(bolt-color(gray, light), 0.2),
      rgba(bolt-color(gray, light), 0.2)
    );

    &:after {
      content: '';
      opacity: 1;
      top: 50%;
      left: 0;
      transform: translate3d(
          calc(100% + var(--bolt-spacing-x-xxsmall)),
          -60%,
          0
        )
        rotate(45deg);
      width: 0.5em;
      height: 0.75em;
      border-right: 2px solid var(--m-bolt-headline);
      border-bottom: 2px solid var(--m-bolt-headline);
      border-radius: 0;
      box-shadow: none;
    }
  }

  &:not(:checked):focus + .e-bolt-button {
    &:after {
      display: none;
    }
  }

  &:checked:focus + .e-bolt-button {
    color: var(--m-bolt-link);
    box-shadow: none;
  }
}
JavaScript
const quickFiltersScroll = el => {
  if (!el) return;

  const wrapper = el.closest('.js-www-quick-filters-scroll-wrapper');

  const handleScroll = () => {
    const wrapperWidth = wrapper.offsetWidth;
    const buffer = 1; // Use buffer due to sub-pixel rounding differences between scroll and wrapper width
    const notStart = el.scrollLeft > buffer;
    const notEnd = el.scrollLeft < el.scrollWidth - wrapperWidth - buffer;
    const isOverflowing = el.scrollWidth > wrapperWidth;

    if (isOverflowing) {
      wrapper.classList.add('is-overflowing');
      if (notStart) {
        wrapper.classList.add('is-not-start');
      } else {
        wrapper.classList.remove('is-not-start');
      }
      if (notEnd) {
        wrapper.classList.add('is-not-end');
      } else {
        wrapper.classList.remove('is-not-end');
      }
    } else {
      wrapper.classList.remove('is-overflowing');
      wrapper.classList.remove('is-not-start');
      wrapper.classList.remove('is-not-end');
    }
  };

  el.addEventListener('scroll', handleScroll, { passive: true });
  window.addEventListener('resize', handleScroll, { passive: true });

  handleScroll(); // Call once onload to setup initial classes
};

const quickFiltersScrollEl = document.querySelector(
  '.js-www-quick-filters-scroll',
);

if (quickFiltersScrollEl) {
  quickFiltersScroll(quickFiltersScrollEl);
}

community docs

Full page mockups are not available on this view-all page. Use the side nav to explore each page individually.

oclp docs

Full page mockups are not available on this view-all page. Use the side nav to explore each page individually.

portal docs

Full page mockups are not available on this view-all page. Use the side nav to explore each page individually.

user docs

Full page mockups are not available on this view-all page. Use the side nav to explore each page individually.

new system request form

New System

Stakeholder

Email: username.usersurname@pega.com

Department: IT - Applications - Digital Redesign - PL

Quota: 0/10

all system page

1717 systems total

All
System name IP address System description Stakeholder (POC) Current build PMF tags Host status Operations Links
sysnam01 xx.xxx.xx.xx Proof of concept Stakholder One 1.2.3-XZ. Enabled Self Service Open Studio
sysnam02 xx.xxx.xx.xx Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, harum a, exercitationem dolor laudantium illo neque eligendi cum, veritatis excepturi vel nihil incidunt amet sint sed vero et sequi sapiente. Stakholder Two 7.8.9-XZ Enabled Self Service Open Studio
sysnam01 xx.xxx.xx.xx Proof of concept Stakholder One 1.2.3-XZ. Enabled Self Service Open Studio
sysnam02 xx.xxx.xx.xx Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, harum a, exercitationem dolor laudantium illo neque eligendi cum, veritatis excepturi vel nihil incidunt amet sint sed vero et sequi sapiente. Stakholder Two 7.8.9-XZ Enabled Self Service Open Studio
My Systems
My Systems table
Department
Department table

system dashboard

lab055

System will be shutdown soon due to inactivity

Component Status Action
Virtual Machine Up
Host Ping Up
Pega Down
Self-service Up Open
Operations Enabled
User
Credentials
Designer Studio
User: user@pega.com
Password: strong or stronger!
Self-Service Portal
User: user
Password: strong-password
Stakholder Info
Owner name.surname@pega.com
Description test system
Maintainers
Notification Emails
Organization Name Pega
Department Engineer Infrastructure Support - PL
Cost Center 6979
Agile Studio Tags
System Info
Host Name lab055
IP Address xx.xx.xx.xx
Host Environment VMware
Operating System CentOS 8.7
Java Version 1.8
Aplication Server Tomcat
Creation Date 2023-04-19
Pega Platform Stats
Current Build 8.8.0
Codeset
Multitenant false
Core Assembly
Previous Build 8.8.0
Installed Applications
Installed Hotfixes
UDF Status disabled
Self Service Portal Info
Last Portal Action 2023-04-02
Operational Status Enabled
System Status Down
Postgress DB Info
Location local
Version 11.19
Schema Names pegarules / pegadata
JDBC URL jdbc:postgresql://xx.xx.xx/pega
JDBC Creds
User: User
Password: Password
Admin
Stakeholder
Last update May 21, 2020
Customer Type Pega Internal
Region
System Info
Kernel Version 1.2.3.4.5
System Age 20 days
Shutdown Duration
Pega Platform --Stats
Last Interaction 2023-04-04
Last Login
Login activity
User Interactions 0
Modified Rules 0
Pega Platform Info
Designer Studio URL https://xx.xx.xx
SS Portal Info
Self Service Portal URL https://xx.xx.xx
Survey Taken
DB Backup ID
Infrastructure
Services Tomcat
Awsid
System CPU 4
System Memory 15 GiB
System Disk 83GB
System Disk Used 30GB
Delete

Permanently delete this system

email recovery docs

Full page mockups are not available on this view-all page. Use the side nav to explore each page individually.

wysiwyg kitchen sink

WYSIWYG Elements to Bolt Components

Ideal CKEditor Config

Bolt needs to create an example of CKEditor that can map to web components, and all the related Bolt components need to become web components.

ClassicEditor
  .create( document.querySelector( '#editor' ), {
    heading: {
      options: [
        { model: 'paragraph', view: 'bolt-text', title: 'Paragraph' },
        { model: 'headline1', view: 'bolt-text', title: 'Headline xxxlarge h1', attributes: { headline: true, font-size: 'xxxlarge', tag: 'h1' } },
        { model: 'headline2', view: 'bolt-text', title: 'Headline xxlarge h2', attributes: { headline: true, font-size: 'xxlarge', tag: 'h2' } },
        { model: 'headline3', view: 'bolt-text', title: 'Headline xlarge h3', attributes: { headline: true, font-size: 'xlarge', tag: 'h3' } },
        { model: 'headline4', view: 'bolt-text', title: 'Headline large h4', attributes: { headline: true, font-size: 'large', tag: 'h4' } },
        { model: 'headline5', view: 'bolt-text', title: 'Headline small h5', attributes: { headline: true, font-size: 'small', tag: 'h5' } },
        { model: 'headline6', view: 'bolt-text', title: 'Headline xsmall h6', attributes: { headline: true, font-size: 'xsmall', tag: 'h6' } },
        { model: 'subheadline1', view: 'bolt-text', title: 'Subheadline xxlarge', attributes: { subheadline: true, font-size: 'xxlarge', tag: 'p' } },
        { model: 'subheadline2', view: 'bolt-text', title: 'Subheadline xlarge', attributes: { subheadline: true, font-size: 'xlarge', tag: 'p' } },
        { model: 'subheadline3', view: 'bolt-text', title: 'Subheadline large', attributes: { subheadline: true, font-size: 'large', tag: 'p' } },
        { model: 'eyebrow', view: 'bolt-text', title: 'Eyebrow', attributes: { eyebrow: true, tag: 'p' } },
        { model: 'link', view: 'bolt-text', title: 'Link', attributes: { eyebrow: true, tag: 'a' } },
        { model: 'blockquote', view: 'bolt-blockquote', title: 'Blockquote' },
        { model: 'ordered-list', view: 'bolt-ordered-list', title: 'Ordered list' },
        { model: 'unordered-list', view: 'bolt-unordered-list', title: 'Unordered list' },
        { model: 'code', view: 'bolt-code-snippet', title: 'Code snippet' },
      ]
    }
  } )
  .then( ... )
  .catch( ... );

CKEditor Docs

The docs show that mapping each style option to a specific tag and class is possible, but we need to figure out if it can do attributes as well. Otherwise, we'd have to make sure our web components can work without any attributes.

https://github.com/ckeditor/ckeditor-dev/tree/major/plugins
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_acf.html
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-protectedSource

Headlines

Headline 1 is XXLarge Headline

Headline 2 is XLarge Headline

Headline 3 is Large Headline

Text

Body text is medium sized text.

Italic text is emphasized.

Bold text is strong.

Superscript text is sup.

Subscript text is sub.

Link

Link is link component with default settings.

Blockquote

Blockquote is blockquote component with default settings.

Ordered List

Ordered list is
Ordered list component
with default settings

Unordered List

Unordered list is
Unordered list component
with default settings

Code

Code text is the Code Snippet component with default settings.

Table

Column 1 Column 2 Column 3
Row 1 Table is the Table component with default settings. R1C2 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R3C2 R3C3
Footer FC1 FC2 FC3

Missing in Bolt

Figure (Image and Video): the figure component needs to be styled.
All existing components other than the code snippet are not yet web components