Embedding Viewpath PM 4 into your Custom Object page layout

**This page is for Salesforce Integrators/Developers**

After you have followed the steps of our Viewpath PM 4 Installation Guide you are then ready for this optional procedure.

Viewpath PM 4 comes pre-configured with code integration on Accounts and Opportunities (the installation guide showed you how to add to Page Layout). That code enabled the following uses cases:

Listing Projects For Selection – we query Viewpath and give you a dropdown of projects you have access to.
Attaching A Selected Project – we update the host object with the Viewpath Project Id and use that to display the attached project in an embedded view of the page.
Removing Attached Project – we clear the Project Id from the host object which then blanks the embedded project view.

This guide provides the procedure and sample code that a developer of your company would use to embed the Viewpath4 application on a Page Layout of your Custom Object. Once complete this will enable the same features seen on Accounts and Opportunities. We suggest you try it first via Accounts and/or Opportunities to understand the benefits and use cases.

A) The procedure

Determine the best location to embed this new Viewpath 4 UI Section in the Page Layout of your object.
Find and note the API name for the Object you are embedding into. It’s always trailed with two underscores then the letter c. Example for Orders would be Orders__c and Installations would be Installations__c.
Using the sample files below, implement the same for your chosen object, using its API name in the file names as well as in the code.
Upon completion of the above, follow the steps of our Installation Guide, to add your newly created Visual Force Page extension to your Page Layout.
Verify operation of the use cases above.
Share with your team and send feedback to use.

Congratulations!
You are now ready to enjoy Viewpath 4 embedded on your Custom Object.
Please connect with support@viewpath.com if you have any questions.

B) The sample code files

The samples below are from a custom object named MyObject. As you paste each of the files below into your editor you should be able to easily do a Search and Replace for ‘MyObject’ with ‘YourObjectName’.

B1) Add Text field to your object to hold our Project ID
Add a custom field using these values:
Field Type: Text, Field Label: VP4_Project, Field Name: VP4_Project, Description: Points to the Viewpath 4 project linked to, General Options all unchecked, Length: 255
You do not need to add this to any Page Layouts as the UI will show you what is attached.
After adding, it should show in your Custom Fields list as
VP4_Project VP_Project__c Text(255)

B2) Create a new class for an Extension Controller on your Object.
File name suggestion is YourObject_VPExtension.

global with sharing class MyObject_VPExtension {

public String authToken {get;set;}

public String projectId {get;set;}

public List<SelectOption> projects{get;set;}

public MyObject__c currentMyObject;

public MyObject__c myObjectDetail;

private final ApexPages.StandardController myObjectController;

public MyObject_VPExtension(ApexPages.StandardController sc) {

this.myObjectController = sc;

projects = getProjectSelectOptions();

currentMyObject = (MyObject__c)sc.getRecord();

if (Test.isRunningTest()){

authToken = 'test';

}

else

{

authToken = Viewpath_PM.VP4_Utils.getAuthToken();

}

myObjectDetail = [SELECT Id, VP4_Project__c FROM MyObject__c WHERE Id = :currentMyObject.id];

if(myObjectDetail.VP4_Project__c != null || myObjectDetail.VP4_Project__c == ''){

projectId = myObjectDetail.VP4_Project__c;

}

public PageReference updateProjectAssociation(){

if(myObjectDetail != null){

if(!Schema.sObjectType.MyObject__c.fields.VP4_Project__c.isUpdateable()) // check for FLS access

{

ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.WARNING, 'Insufficient field level access to update VP4_Project on MyObject'));

}

else

{

if(projectId.equalsIgnoreCase('None')){

myObjectDetail.VP4_Project__c = null;

}

else{

myObjectDetail.VP4_Project__c = projectId;

}

update myObjectDetail;

}

return null;

}

public PageReference removeProjectAssociation(){

if(myObjectDetail != null){

projectId = 'None';

if(!Schema.sObjectType.MyObject__c.fields.VP4_Project__c.isUpdateable()) // check for FLS access

{

ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.WARNING, 'Insufficient field level access to update VP4_Project on MyObject'));

}

else

{

myObjectDetail.VP4_Project__c = null;

update myObjectDetail;

}

return null;

}

public List<SelectOption> getProjectSelectOptions(){

List<SelectOption> projectOptions = new List<SelectOption>();

projectOptions.add(new SelectOption('None', '--None Selected--'));

List<Viewpath_PM.VP4_ViewpathProject> prjs;

if (Test.isRunningTest()){

prjs = new List<Viewpath_PM.VP4_ViewpathProject>();

Viewpath_PM.VP4_ViewpathProject prj1 = new Viewpath_PM.VP4_ViewpathProject();

prj1.projectId = '123';

prj1.projectName = 'Test';

prjs.add(prj1);

}

else

{

prjs = Viewpath_PM.VP4_Utils.getViewpathProjects();

}

for(Viewpath_PM.VP4_ViewpathProject vpProject : prjs){

projectOptions.add(new SelectOption(vpProject.projectId, vpProject.projectName));

}

return projectOptions;

}

B3) Create a new Visual Force Page with the Viewpath 4 UI elements.

File name suggestion is YourObject_VPExtension.

<apex:page standardcontroller="MyObject__c" applyBodyTag="false" sidebar="false" cache="false" extensions="MyObject_VPExtension" >

<body>

<apex:PageMessages id="pageMessages" />

<apex:form >

<apex:pageBlock >

<apex:pageBlockSection >

<apex:outputPanel layout="block">

<apex:outputLabel for="viewpathProjectSelect" style="font-weight:bold" value="Select a Viewpath4 Project to attach to this MyObject."/>

<apex:selectList size="1" id="viewpathProjectSelect" value="{!projectId}">

<apex:selectOptions value="{!projects}"/>

</apex:selectList>

<apex:commandButton action="{!updateProjectAssociation}" value="Attach Project" />

<apex:commandLink rendered="{!NOT(ISBLANK(projectId))}" style="display:block;margin-left:5px; margin-top:5px;" action="{!removeProjectAssociation}" value="Remove Project" reRender="VPProjectView, viewpathProjectSelect"/>

</apex:outputPanel>

</apex:pageBlockSection>

</apex:pageBlock>

</apex:form>

<apex:outputPanel id="VPProjectView">

<apex:outputPanel rendered="{!AND(NOT(ISBLANK(projectId)), NOT(projectId = 'None'))}">

<apex:canvasApp applicationName="Viewpath4" width="100%" containerId="viewpathContainer" entityFields="VP4_Project__c" />

</apex:outputPanel>

<apex:outputPanel rendered="{!OR(ISBLANK(projectId), projectId = 'None')}">

You have not associated a Viewpath4 project with this MyObject.

</apex:outputPanel>

</body>

</apex:page>

After making the Visualforce page you need to add it to your object layout. Select the object you want to add it to from the Object Manager and select the Page Layouts tab, then choose the desired layout you want to edit. In the layout pane at the top of the page choose Visualforce Pages from the first column, then drag and drop your custom page from the second column to where you want it in your layout. Once in the desired location, click on the Properties button (wrench icon in the top right corner) and edit the height of the object to the desired size. You may also turn on the scroll bar option here if needed.

Once you have completed the installation on the Visual Force page, you can go to your custom object, and you will have a Viewpath section now available. From there, you can select which Viewpath project to attach to your custom object.

Inside your new item, you'll see a Viewpath Project section. From the drop-down menu, you may select the project you wish to attach to this item in your Custom Object.

This is a one-to-one association.

Articles in this section

Embedding Viewpath PM 4 into your Custom Object page layout

Comments