Embedding Jointflows into SFDC is achieved via a Visual Force Page.
This page can either call the specific URL of a Jointflows Project and relies on the jf_project_link field being available (see specific How To guide).
Or the page can call a URL which will provide a list of all projects available for the current Salesforce Opportunity.
Both options are provided below.
Note: No coding is required to follow the instructions below but if you want to optimise the display some HTML/CSS will give you the ability to configure more precisely.
1. Create Visual Force Page
Log into salesforce as an administrator, click search and Open Visual Force Pages
Click New
Fill the form as follows (Apex code to copy/paste is provided below):
Option 1: Only for single project display. Copy the following in the Visualforce Markup field:
<apex:page standardController="Opportunity" tabStyle="Opportunity">
<apex:pageBlock >
<apex:pageBlockSection title="Jointflows Project Overview">
</apex:pageBlockSection>
</apex:pageBlock>
<iframe src="{!opportunity.jf_project_link__c}?navbars=False" width="100%" height="800px"/>
</apex:page>RECOMMENDED Option 2
Most versatile option which displays the list of linked project. This version also provides the ability to create a JF project from within Salesforce.
<apex:page standardController="Opportunity" tabStyle="Opportunity">
<apex:outputPanel id="panel1">
<style>
iframe {
width: 125% !important;
-webkit-transform: scale(0.80);
transform: scale(0.80);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
scrolling: no;
overflow: hidden!important;
}
body{
scrolling: no !important;
overflow-y: hidden !important;
overflow-x: hidden !important;
overflow: hidden!important;
}
</style>
<script>
var overflow = document.querySelector("body");
overflow.setAttribute('style', 'overflow-x: hidden !important; overflow-y: hidden !important');
</script>
<iframe src="https://XXXREPLACEXXX.appjointflows.com/crm_project/?crm__id={!opportunity.id}&navbars=False&actions=True" width="95%" height="800px"/>
</apex:outputPanel>
</apex:page>Replace "XXXREPLACEXXX" with your instance domain.
2. Add to Opportunity layout
Navigate to the Opportunity / Page Layout
On the Opportunity Layout, scroll down to Visualforce Pages
Your page component should be available to get dragged-and dropped into the desired place on your Opportunity form.
Sample Layout in Salesforce
Reference: APEX Components : https://dmc-dev-ed.my.salesforce.com/apexpages/apexcomponents.apexp
3. How to optimise the display of the Jointflows Embed
3.1 Zooming in-out
You can Zoom in or out the view of Jointflows using the code below. To do so you need to adapt the scale and width parameters:
For example to Zoom down the content to 80%:
- zoom 80% → scale = 0.8
- Width = 1/0.8 = 1.25 = 125%
Resulting in the code:
<style>
iframe {
width: 125% !important;
-webkit-transform: scale(0.80);
transform: scale(0.80);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
</style>
3.2 Show/Hide actions
<iframe src="{!opportunity.jf_project_link__c}&navbars=False&actions=False" width="100%" height="800px" id="frame1"/>set action=True to activate the [...] Button and the [+ Add Task] Button
3.3 Optimise display for Classic view
Code optimised for Classic view:
<apex:page standardController="Opportunity" tabStyle="Opportunity" id="page1">
<apex:pageBlock id="block1">
<apex:pageBlockSection title="Jointflows Overview" id="section1" columns="1" collapsible="true" onclick="resizeheight()">
<apex:outputPanel rendered="{!IF(opportunity.jf_project_link__c!= '', true , false)}" id="panel1">
<style>
iframe {
width: 125% !important;
-webkit-transform: scale(0.80);
transform: scale(0.80);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
</style>
<iframe src="{!opportunity.jf_project_link__c}&navbars=False&actions=True" width="100%" height="800px" id="frame1"/>
</apex:outputPanel>
<apex:outputPanel rendered="{!IF(opportunity.jf_project_link__c= '', true , false)}">
Project not yet present in Jointflows
</apex:outputPanel>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>
3.4 Optimise display for Lightning view
In the Lightning View, You might want to create a display that has two columns rather than 3 as it will better utilise the estate available:
To do so, open an Opportunity record and click on the Setup/Edit Page menu.
Change the template:
Then move the various components around and as you wish them to be displayed. Don't forget to "Activate" and make that form available and default for the right parts of your org.
More info on how to modify and activate Lightning Pages Here
NOTE:
Salesforce Styling enforces some CSS which make scrollbars appear where you don't want them. Below is some code optimised to address those issues:
<apex:page standardController="Opportunity" tabStyle="Opportunity">
<apex:outputPanel rendered="{!IF(opportunity.jf_project_link__c!= '', true , false)}" id="panel1">
<style>
iframe {
width: 125% !important;
-webkit-transform: scale(0.80);
transform: scale(0.80);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
scrolling: no;
overflow: hidden!important;
}
body{
scrolling: no !important;
overflow-y: hidden !important;
overflow-x: hidden !important;
overflow: hidden!important;
}
</style>
<script>
var overflow = document.querySelector("body");
overflow.setAttribute('style', 'overflow-x: hidden !important; overflow-y: hidden !important');
</script>
<iframe src="{!opportunity.jf_project_link__c}&navbars=False&actions=True" width="95%" height="800px"/>
</apex:outputPanel>
<apex:outputPanel rendered="{!IF(opportunity.jf_project_link__c= '', true , false)}">
Project not yet present in Jointflows
</apex:outputPanel>
</apex:page>