...
...
...
Sales Engineering Process Design Standards
...
...
...
Contents
...
| Anchor |
|---|
| _amiq07xiw1rz |
|---|
| _amiq07xiw1rz |
|---|
|
Process Designers/ArchitectsEveryone in the department should have their own user in an environment where they are creating or editing assets. This allows all team members to refer to the correct person when asking about a process they need to edit or demo in the future. If everyone logs in as the administrator, then there is no insight into who created an asset or who made changes to an existing asset in the version log.
...
Participants in the process should have generic usernames (ex: “applicant” and “reviewer”) and should just be a fake name without any relation to popular media (ex. “Abby Applicant” and “Ricky Reviewer”). All email addresses for dummy users should be se+[username]@processmaker.com (ex. “se+applicant@processmaker.com” and “se+reviewer@processmaker.com”). Passwords for all dummy users should be “Password123”.
...
| Anchor |
|---|
| _32uxz2cayv6f |
|---|
| _32uxz2cayv6f |
|---|
|
Creating a New Screen | Anchor |
|---|
| _yejshgu7s10o |
|---|
| _yejshgu7s10o |
|---|
|
Naming conventions for screens
...
Note: The HTML below hides the right panel and breadcrumbs when an end user is completing a task while signed into the platform. If you do not want to hide these items, then make a copy of the header and delete the HTML that hides them in the copy.
<div class="welcome-banner mb-4 bg-primary hdrContainer"><!--hdr-->
<div class="hdrWrap">
<div class="flex hdrTopBar bg-primary"> </div>
<div class="flex flexCenter hdr">
<div class="flex flexCenterItems hdrLogoContainer"><img class="logoTxt" src="https://application-demo-se.processmaker.net/public-files/PMLogoStacked-png.png" width="150" height="150" /></div>
<div class="flex flexCenterItems flexFlexEnd hdrTxt">
<h3>{{pageTitle}}<br/>
<span>{{pageSubTitle}}</span></h3>
</div>
</div>
<!--END hdr --></div>
<!--END hdrWrap --></div>
<!--END hdrContainer -->
<style>
@media only screen and (max-width : 860px) {
.hdrLogoContainer.logoTxt{display:none;}
}
/*Hide task details for customers */
#navbar-request-button, #breadcrumbs, #task.d-flex.flex-column.ml-md-3.mt-3.mt-md-0, #request.d-flex.flex-column.ml-md-3.mt-3.mt-md-0 {
display: none;
}
</style> |
Below is the accompanying CSS to complete the header styling.
.welcome-banner {
padding: 30px60px;
color: white;
border-radius: 5px;
}
.logo {
float: right;
color: #fff;
}
.logoimg {
float: left;
width: 70px;
}
.logoh1 {
margin: 10px0px0px80px;
}
/**{box-sizing: border-box; margin:0; padding:0;}*/
a{text-decoration: none; color:#333; cursor: pointer;}
.hdrContainer{width: 100%; margin:0 auto; padding:0px; text-align:center; background-color:#ffffff!important;}
.hdrTopBar{width: 100%; height:40px; margin:0 auto; padding:0px; }
.hdrLogoContainer{width:30%; background-color:transparent; padding-left:40px;}
.hdrLogoContainer.logoMark{max-width:54px; height:auto;}
.hdrLogoContainer.logoTxt{max-width:265px; height:auto;}
.hdrLogo{background-color:transparent; padding-left:40px;}
.hdrTxt{width:70%; background-color:transparent; padding-right:40px;}
.hdrTxth3, .hdrTxtp, .hdrTxtspan{color:#333333; text-align:right; font-weight:normal;}
.hdrTxth3{font-size:20px; font-weight:bold;}
.hdrTxtspan{font-size:18px; font-weight:normal;}
.hdrBottombar{width: 100%; height:40px; margin:0 auto; padding:0px; text-align:center; background-color: #035142!important;}
/* flex */
.flex { display: -webkit-box;display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}
.flexCenter {-webkit-align-content: center; -webkit-justify-content: center; align-content: center;justify-content: center;} /* remove for equal height cols */
.flexCenterItems{align-items: center;}
.flexFlexEnd{justify-content: flex-end;}
.flexTopItems{align-items: flex-start;}
.rowWrap {flex-flow: row wrap;-webkit-flex-flow: row wrap;}
.flexColumnStack{flex-direction: column; margin:0 auto;}
.flexInner {}
.flexVerticalCenter{display: flex;flex-direction: column;justify-content: center;}
/* hero and hdr */
.hdrWrap{width:100%; height: 164px; margin:0 auto; background-color:#ffffff; top:0; z-index:2; /* margin-top:60px; margin-top to compensate for height of fixed hdrTp height */box-shadow: 1px1px24px1pxrgba(0, 0, 0, 0.1);}
.hdr{width:100%; height: 124px; margin:0 auto; background-color:transparent;} |
The image below is the end result of the HTML and CSS above.
...
The CSS to do this is included below.
.row.justify-content-md-center > .col-md-auto {
2 width: 100%;
3}
4.row.justify-content-md-center > .col-md-autobutton {
5 width: auto;
6}
7.row.justify-content-md-center > .col-md-auto.fas::before {
8 text-transform: capitalize;
9 font-family: "Open Sans";
10 font-weight: normal;
11}
12
13[selector='selector-name'] .row.justify-content-md-center > .col-md-auto.fas.fa-plus::before {
14 content: "Add Loop Item";
15}
16[selector='selector-name'] .row.justify-content-md-center > .col-md-auto.fas.fa-minus::before {
17 content: "Remove Last Item";
18} |
| Anchor |
|---|
| _j1onbz7eedc4 |
|---|
| _j1onbz7eedc4 |
|---|
|
Nested Screens
...
Use the CSS below to replace the loading screen for watchers from the default.
This website is a good resource for generating unique loading animations: https://loading.io/.
<style>
2#watchers-synchronous.container.text-center * {
3display: none;
4}
5#watchers-synchronous.container.text-center {
6min-height: 200px;
7background: url(https://bankingbaseline.processmaker.net/public-files/loading.svg);
8background-repeat: no-repeat;
9 background-size: 100%100%;
10background-position: center;
11}
12}
13</style> |
| Anchor |
|---|
| _n84shtoo41z0 |
|---|
| _n84shtoo41z0 |
|---|
|
Bookend pages
...
| Anchor |
|---|
| _owqdkm3yeic5 |
|---|
| _owqdkm3yeic5 |
|---|
|
Request Tracking
The ability to track requests is crucial for any end user, and helps immensely when demoing a process to a prospect because it helps the prospect understand the sequence of events as the sales engineer runs through the demo. Therefore, each demo asset should have generic users (e.g. “applicant” and “reviewer”) that each have their own dashboards, top menus and saved search charts that make sense within the context of the user’s role. Including relevant ways to track requests helps immerse prospects into the experience and allows them the understanding to start applying some of the concepts demonstrated to them to their own use cases.
| Anchor |
|---|
| _yb58hg4mym58 |
|---|
| _yb58hg4mym58 |
|---|
|
Top menu/saved searches
Every dummy user in a demo should have their own customized top menu with options appropriate for their role in the demo.
For example, users external to the organization that have a ProcessMaker user typically have only one menu option: My Dashboard.
On the other hand, a manager might have a link to their Dashboard, an In Queue option linking to a list of requests waiting to be claimed, a To Do option linking to a list of tasks assigned to the user, and a link to a Collection or Saved Search containing important, relevant statistics regarding the use case being demoed.
Each link in the top menu should have their own accompanying icon next to the test. The link text itself should be clear, concise with each word capitalized. The example below is a top menu for a user that reviews incoming applications.
...
| Anchor |
|---|
| _7jziijmcbws9 |
|---|
| _7jziijmcbws9 |
|---|
|
Dashboards
...
The contact property should be used to create any saved search chart related to tracking requests.
"contact": {
"uid": "60d6abc9-1939-4482-a084-390c0e1935d8",
"email": "summer.kay@processmaker.com",
"fullName": "Sade Schultz",
"lastName": "Schultz",
"cellPhone": "1307684755",
"firstName": "Sade"
} |
| Anchor |
|---|
| _1x7mmvq23ex9 |
|---|
| _1x7mmvq23ex9 |
|---|
|
People
The People property contains all personal information relating to any person listed on a form or application. All nested properties may not be necessary for each process, but this object contains most, if not all, basic information required for any application.
"people": [
{
"SSN": "666990720",
"uid": "60d6abc9-1939-4482-a084-390c0e1935d8",
"city": "Los Angeles",
"email": "summer.kay@processmaker.com",
"state": "AR",
"title": "CEO",
"postal": "24352",
"address": "123 Test Lane",
"country": "US",
"mailing": false,
"fullName": "Sade Schultz",
"lastName": "Schultz",
"cellPhone": "1307684755",
"firstName": "Sade",
"signature": {
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjgAMAAAoAAWkGOTIAAAAASUVORK5CYII="
},
"workPhone": "1657612204",
"isUSPerson": false,
"middleName": null,
"occupation": "CFO",
"dateOfBirth": "2022-04-12",
"isUSCitizen": null,
"mailingCity": "",
"addressSuite": "",
"employerCity": "",
"employerName": "",
"isUSResident": null,
"mailingState": null,
"employerState": null,
"mailingPostal": null,
"relationships": [
"Signer",
"Cardholder",
"Online User",
"Beneficial Owner",
"Control Owner"
],
"employerPostal": "",
"enableRequired": true,
"mailingAddress": "",
"mailingCountry": "US",
"employerAddress": "",
"preferredMethod": "SMS (Text)",
"employmentStatus": "Unemployed",
"foreignPolitical": null,
"isPrimaryContact": true,
"yearsOfResidence": "0",
"businessOwnership": [
{
"businessUid": "0e6e15a8-f7bc-42ab-830a-ce5f9f63a50f",
"businessName": "Risa Hamilton",
"ownershipPercentage": "0"
}
],
"internationalCity": "",
"monthsOfResidence": "0",
"employedByBusiness": "No",
"internationalState": "",
"employerInformation": {
"city": "",
"name": "",
"state": "",
"postal": "",
"address": ""
},
"employmentStartDate": null,
"internationalPostal": "",
"internationalAddress": null,
"internationalCountry": null,
"foreignPoliticalCountry": "",
"hasInternationalAddress": false,
"relatedForeignPolitical": null,
"foreignPoliticalPosition": null,
"requireEmployerInformation": false,
"relatedForeignPoliticalName": "",
"relatedForeignPoliticalCountry": "",
"relatedForeignPoliticalPosition": null,
"relatedForeignPoliticalRelationship": null
}
] |
...
