My Documents Component
Intro
This component renders a number of documents based on the document assignments for a given contact user.
3B Portals Compatibility
This component is fully compatible with 3B Portals
Implementation
Portals
Drag and drop the component on any page. You can customize the component properties from the Traits Manager.
Visualforce Pages
You can embed the user-documents component in a Visualforce Page using the following syntax:
<apex:page showHeader="false" sidebar="false" standardStylesheets="false" controller="b3o.GlobalRemotingRouter"
docType="HTML-5.0" applyHtmlTag="false" applyBodyTag="false"
>
<html lang="en">
<head>
<title>Documents</title>
<meta name="description" content="3B CLM"/>
<meta name="apple-mobile-web-app-title" content="3B CLM"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui"/>
<meta charset="utf-8"/>
<meta name="apple-mobile-web-app-status-bar-style" content="default"/>
<meta name="msapplication-TileColor" content="#00aba9"/>
<meta name="theme-color" content="#ffffff"/>
<link rel="shortcut icon" href="{!URLFOR($Resource.b3p__Branding, '/icons/favicon.ico')}"/>
<link rel="icon" type="image/png" sizes="16x16" href="{!URLFOR($Resource.b3p__Branding, '/icons/favicon-16x16.png')}"/>
<link rel="icon" type="image/png" sizes="36x36" href="{!URLFOR($Resource.b3p__Branding, '/icons/favicon-36x36.png')}"/>
<link rel="icon" type="image/png" sizes="96x96" href="{!URLFOR($Resource.b3p__Branding, '/icons/favicon-96x96.png')}"/>
<link rel="apple-touch-startup-image" href="{!URLFOR($Resource.b3p__Branding, '/images/splash/launch-640x1136.png')}" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="{!URLFOR($Resource.b3p__Branding, '/images/splash/launch-750x1294.png')}" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="{!URLFOR($Resource.b3p__Branding, '/images/splash/launch-1242x2148.png')}" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="{!URLFOR($Resource.b3p__Branding, '/images/splash/launch-1125x2436.png')}" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="{!URLFOR($Resource.b3p__Branding, '/images/splash/launch-1536x2048.png')}" media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="{!URLFOR($Resource.b3p__Branding, '/images/splash/launch-1668x2224.png')}" media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="{!URLFOR($Resource.b3p__Branding, '/images/splash/launch-2048x2732.png')}" media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)"/>
<link rel="apple-touch-icon" sizes="180x180" href="{!URLFOR($Resource.b3p__Branding, '/icons/apple-touch-icon.png')}"/>
<script>
window['globals'] = {
sessionId: '{!GETSESSIONID()}',
siteUrl: '{!$Site.baseUrl}',
orgUrl: '{!orgUrl}',
onboardingUrl: "{!JSENCODE($Setup.b3o__Onboarding_Default_Settings__c.b3o__Site_URL__c)}",
userTimezone: '{!userTimezone}',
clientTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
if(!window["globals"]?.onboardingUrl){
alert('Please set b3o__Onboarding_Default_Settings__c.b3o__Site_URL__c');
}
/**
* user-documents has the following properties
* hide-theme-switch="false"
* hide-current-user="false"
* theme-type="light"
* user-id="" - current user (contact id)
* app-id="" - if passed, we will auto-relate newly created document pack to
* 3B Application (used in conjunction with doc-pack-id)
* doc-pack-id="" - if passed, we wil get/create and show only that document pack
*/
</script>
<script src="/soap/ajax/60.0/connection.js" type="text/javascript"></script>
<script type="module" src="{!URLFOR($Resource.b3o__MyDocuments, 'index.js')}"></script>
<style>
* {
--global-white: white;
}
/**
* Default Body Styling
*/
body {
background-color: var(--global-white);
font-size: 14px;
letter-spacing: 0.01em;
color: #39464e;
font-family: system-ui;
}
div.container {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="app" oncontextmenu="return false;">
<user-documents
theme-type="{!IF(ISBLANK($CurrentPage.parameters.themeType), 'emerald', JSENCODE($CurrentPage.parameters.themeType))}"
hide-theme-switch="{!IF(ISBLANK($CurrentPage.parameters.hideThemeSwitch), 'true', JSENCODE($CurrentPage.parameters.hideThemeSwitch))}"
hide-current-user="{!IF(ISBLANK($CurrentPage.parameters.hideCurrentUser), 'false', JSENCODE($CurrentPage.parameters.hideCurrentUser))}"
application-field-path="b3o__X3B_Application__c"
failed-to-identify-msg="Failed to identify user"
no-assignments-msg="No documents are assigned to you currently."
submit-docs-btn="Submit Documents"
dashboard-btn="Dashboard"
expired-lbl="Expired"
expireds-lbl="Expires"
due-in-lbl="Due In"
status-lbl="Status"
submit-btn="Submit"
re-submit-btn="Re-Submit"
view-submission-btn="View Submission"
days-lbl="days"
requested-lbl="Requested"
rejected-lbl="Rejected"
pending-review-lbl="Pending Review"
requested-update-lbl="Requested Update"
approved-lbl="Approved"
rejected-submission-msg="Your submission was rejected."
packs-lbl="Packs"
number-of-requests-lbl="number of requests"
number-of-documents-lbl="number of documents"
expiring-soon-lbl="Expiring Soon"
pending-lbl="Pending"
waiting-submission-lbl = "Waiting Submission"
submissions-lbl = "Submissions"
no-submissions-lbl = "No Submissions"
complete-lbl="Complete"
completed-lbl="Completed"
not-completed-lbl="Not Completed"
submitted-lbl="Submitted"
issued-lbl="Issued"
due-lbl="Due"
submit-previous-document-msg="Submit previous document"
></user-documents>
</div>
</div>
</body>
</html>
</apex:page>
External Websites
You can embed the user-documents component in a wordpress/custom sites by using a relative
Options
Attributes
user-id - this is the contact id. Required
app-id - this is a contextual application id. If provided, we will render only the documents linked to the contextual application.
doc-pack-id - this is the document pack id. If provided, will render only the documents associated with that document pack. If the contact doesn't have a document assignment for the provided document pack, then we will create a new one. If app-id is also provided, the new document assignment will be linked to the application record
application-field-path="b3o__X3B_Application__c" - this is the lookup field on the Document Assignment that we will populate with the Application Id in the "Post Application Document Pack" process or when app-id is passed as a parameter.
URL Params
userId or just id - the contact id
appId or applicationId - the application record id
dpId or docPackId - the document pack id
Notice that attributes will always override URL params and you can mix and match. If dpId is added, we will create a new document assignment
Translations
If you are using the Visualforce page to host this component, you can auto-translate it to the running user's language by:
- Changing the language on the user (or Guest Site User)
- Adding translations to the custom labels on the visualforce page
This way, you can add multiple translation languages and ensure that the component displays it based on the user's locale.
Alternatively, you can create a custom visualforce page and provide your own translations.
Closing the Modal
Custom embedded pages can cause a document modal close by issuing an iframe post event from the page/visualforce page like so:
window.parent.postMessage(
{
event_id: 'x3b_close_modal',
data: {
}
},
"*"
);