Drag and drop to have the bin eat the item.
<a href="#" draggable="true"> one </>
<input type="date" name="datepicker" />
<input type="number" name="quantity" min="1" max="5" />
<input type="email" name="useremail" /><input type="text" required />HTML5 features - Semantics & Markup
PatternTelephone Number :<input type="tel" placeholder="(555) 555-5555"
pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />HTML5 features - Semantics & Markup
Drag and drop to have the bin eat the item.<a href="#" draggable="true"> one </>![]()
HTML5 features - CSS3
Gradients :background: -*-gradient( /*Two Stop gradient*/
linear, left top, left bottom,
from(blue), to(green),
color-stop(0.5, white),/*first stop at white*/
color-stop(0.5, white) /*second stop from white*/
);HTML5 features - CSS3
Gradients: How is it done today?![]()
HTML5 features - CSS3
Rounded Corners :-*-border-radius: 50px 50px 50px 50px;
HTML5 features - CSS3
Rounded Corners: How is it done today?![]()
HTML5 features - CSS3
Rounded Corners: How is it done today?<style type="text/css"> .contentplace { background-color: blue; } .topplace{ background: url(top-right.png) no-repeat top right; } .bottomplace { background: url(bottom-right.png) no-repeat top right; } img.placeborder { width: 28px; height: 28px;border: none;display: block !important; } </style> <div class="contentplace"> <div class="topplace"> <img src="top-left.png" class="placeborder" style="display: none" /> </div> <div class="bottomplace"> <img src="bottom-left.png" class="placeborder" style="display: none" /> </div> </div>PRPC in Standards Mode - How ?
IE6 standards != IE7 standards != IE8 standards != IE9 standards ~= FF and chrome standards.
PRPC screens will
- Work in quirks mode in IE6 and IE7
- Support Standards mode in IE versions >= 8 and other browsers
PRPC in Standards Mode - How ?
What about backward compatibility ? - Introduced a switch.
- Application level switch
- Harness level switch
![]()
https://mesh.pega.com/community/projects/prpc/userinterface/projects/web-standards-adoptionLet the browser do its job
- No JS implementation for Modal dialog.
- No JS implementation for button bar
- No JS sizing for dynamic container
CSS Based Modal Dialog
- Leveraged the advanced CSS support available in Standard mode
- No JS for sizing and positioning
- Highly performant
End result..
- Applications built using 7.1 renders in Standards mode.
- Existing applications which are 100% guardrails complaint should upgrade to standards mode and should work seamlessly.
- For applications which are not 100% guardrails compliant we provide
- Tools and Documentation.
Where are we?
Auto Genenerated UIWhere are we?
ReportsWhere are we?
OOTB UITeams
- Infrastructure for Standards mode.
- Infrastructure for Legacy mode.
- Layouts
- Tabs (Section/Container/Repeat)
- Navigation Rules
- RTE
- Spell Checker
- Modal Dialog
- Panelsets
- Harnesses (Infrastructure, Resizing etc)
- OOTB Flow Actions
- Non-auto generated controls.
- ActionArea
- Accordions
- Grid
- Tree
- Tree Grid
- Row Repeat
- Column Repeat
- List View
- Summary View
- Report Definition
- Report Viewer
- Flex Chart Controls
- Work Area / Dynamic Containers
- Tab Scroller
- Auto-generated Controls (Smart Info rewrite ?)
- Case Designer
- Case Manager Portal
- All Supported IAC functionality
- Some of the OOTB UI
Epics & Teams
EPIC-1397 : Reporting UI changes to support standards mode Bisy Bis EPIC- 956 : Introduce "DocType" Tag Rendering for Standards Mode Compliance Nimbus EPIC-1310 : Auto Generated controls to work in Standards mode Autobots EPIC-1311 : Grids/ Tree/ Tree Grid to render in Standards mode Pixel Perfect EPIC-1312 : Enable Standard mode for new application Nimbus EPIC-1313 : Layouts & Containers to render in Standards mode Webwiz & Nimbus EPIC-1314 : OOTB UI Controls, Flow actions & Screen flow in Standards mode Nimbus EPIC-2333 : IAC in Standards Mode IAC EPIC-1866 : Case Management Portal to render in Standards mode Case Management ![]()
![]()
Questions
?
Thank You
Sapna Grover
Shyam Agarwal