You can add Quik! integration to your Salesforce account by using just the Quik! web services (to generate forms and to display a list of forms to users). The integration will generally take a salesforce.com developer 5 to 15 days to complete depending on the complexity of your user experience. The implementation uses Apex, JavaScript and XML.
Concepts
It's important to understand the framework in which Quik! forms can be displayed and controlled within SalesForce. Since SalesForce has strong control over it's user experience and security, you can't just simply display a Quik! Form Viewer (HTML) in an iFrame.
In addition, you should not use set "HostFormsOnQuik = TRUE" to return a URL to the form as that is not a secure method for display forms within SalesForce. Instead, you need display the entire HTML returned by the Quik! Forms Engine Execute HTML method.
SalesForce won't allow external references or javascripts to run in an iFrame that is displayed within a typical Lightning or other SalesForce component. Instead, you must display a Visual Force in the iFrame for the Quik! Form to display within. Set the iFrame to the Visual Force page URL and set the Visual Force page with the HTML content.
Be aware that the styles within the Quik! Form Viewer (HTML) use absolute references to display items. Be sure to allow sufficient size to display the entire Quik! Form.
Program Flow
The basic program flow is as follows:
...
The following class is used to create and post an XML SOAP request and to process the response.
public with sharing class QuikFormHttpUtility {
public static String SendSOAPRequest(string strXML )
{
System.debug(strXML);
string xml='';
http soap = new http();
Httprequest soap_request = new Httprequest();
Httpresponse soap_response = new Httpresponse();
//soap_request.setEndpoint('https://websvcs.quikforms.com/quikformsenginews/5300/QuikFormsEngine.asmx');
soap_request.setEndpoint('https://websvcs.quikforms.com/quikformsenginews/5300/quikformsengine.asmx');
soap_request.setHeader('SOAPAction','https://websvcs.quikforms.com/quikformsenginews/Execute');
soap_request.setMethod('POST');
soap_request.setHeader('Host', 'websvcs.quikforms.com');
soap_request.setHeader('Content-type', 'text/xml; charset=utf-8');
soap_request.setHeader('Content-Length', '' + strXML.length());
soap_request.setTimeout(30000);
soap_request.setBody(strXML);
try
{
// Send the SOAP request
soap_response = soap.send(soap_request);
// Process the response
System.Debug(soap_response.getBody());
System.Debug(soap_response.getStatusCode());
System.Debug(soap_response.getStatus());
xml=soap_response.getBody();
return xml;
}
catch(System.CalloutException ex)
{
System.Debug('Exception thrown: ' + ex.getMessage());
throw ex;
}
catch (Exception e)
{
System.Debug('Exception thrown: ' + e.getMessage());
throw e;
}
return xml;
}
}
...
<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<soap:Header>
<AuthenticationHeader xmlns="https://websvcs.quikforms.com/quikformsenginews/">
<CustomerID>CUSTOMER_ID</CustomerID>
<UserName>USER_NAME</UserName>
<Password>PASSWORD</Password>
</AuthenticationHeader>
</soap:Header>
<soap:Body>
<Execute xmlns="https://websvcs.quikforms.com/quikformsenginews/">
<CustomJavaFileIncludePath />
<CustomJavaScript />
<FormIDs>1,2,3</FormIDs>
<TestDataMode>false</TestDataMode>
<TestFinalFormsMode>false</TestFinalFormsMode>
<FormExpiryDate />
<HTMLBodyOnloadFunction />
<HTMLFieldFontColor />
<HTMLFooter />
<HTMLFooterStyle />
<HTMLLoadingImage />
<HTMLLogoAltText />
<HTMLLogoPath />
<HTMLMainInstruction />
<HTMLMetaNames />
<HTMLMinorInstruction />
<HTMLReportFormError />
<HTMLRequiredBorderColor />
<HTMLShowButtonClear>true</HTMLShowButtonClear>
<HTMLShowButtonPrint>true</HTMLShowButtonPrint>
<HTMLShowButtonReset>true</HTMLShowButtonReset>
<HTMLShowButtonSave>true</HTMLShowButtonSave>
<HTMLShowButtonSign>true</HTMLShowButtonSign>
<HTMLShowButtonSubmit>true</HTMLShowButtonSubmit>
<HTMLStyles />
<HTMLTitle />
<iScrollFilePath />
<iScrollOff>false</iScrollOff>
<jQueryBlockUIFilePath />
<jQueryFilePath />
<jQueryUIFilePath />
<LoadXML><![CDATA[<?xml version="1.0" encoding="UTF-8" standalone="yes"?><ParentField><Field><FieldName>1own.SSN</FieldName><FieldValue>333224444</FieldValue><FieldReadOnly>false</FieldReadOnly><FieldVisibility>1</FieldVisibility><FieldRequired>false</FieldRequired><FieldFormat></FieldFormat><FieldMask>false</FieldMask><FieldCalcOverride>false</FieldCalcOverride><HiddenField>false</HiddenField></Field></ParentField>]]></LoadXML>
<SaveURL />
<SignAllDocsCombined>true</SignAllDocsCombined>
<SignJavascript />
<SignMessage />
<SignShowSignNow>false</SignShowSignNow>
<SignShowVerifyCode>false</SignShowVerifyCode>
<SignShowVerifyIDCheck>false</SignShowVerifyIDCheck>
<SignSubject />
<SignURL>https://websvcs.quikforms.com/Docusign/QuikESignTransportVersion/5300/QuikSignTransport.aspx</SignURL>
<SubmitJavascript />
<SubmitURL>https://websvcs.quikforms.com/HTMLFormViewTrans/v5300/FormViewHTML/QFVGetPDF.aspx?Edit=FALSE</SubmitURL>
<HostFormOnQuik>true</HostFormOnQuik>
<PreviewMode>false</PreviewMode>
</Execute>
</soap:Body>
</soap:Envelope>
Additional Code Snippets That May Help
Your Visualforce Page should contains an iFrame:
Here is where the callout is made and the result is pushed into the iFrame
- Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.QuikConnectorController.makePostCalloutForHTMLRemoteAction}',
paramValue,accountId,
function (result, event) {
if (event.status) {
var iframe = document.getElementById("myiframeid");
if(iframe){
var frameDoc = iframe.document;
if (iframe.contentWindow) {
frameDoc = iframe.contentWindow.document;
}
frameDoc.open();
frameDoc.writeln(result);
frameDoc.close();
refreshIFrameElements(frameDoc);
}
}, { escape: false, timeout: 30000, buffer: false }
)
Elsewhere in the Script tag where the event listener for the iFrame message is created
- window.addEventListener('message', function(event) {
var accountId = {!$CurrentPage.parameters.accountId};
var selectionType = {!$CurrentPage.parameters.selectionType};
if(event.data.startsWith('EditablePDF', 2)){ //The browser will post message events occassionally, only grab messages with the payload
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.QuikConnectorController.fetchPDFsFromQuik}',
event.data, accountId, selectionType,
function (result, event) {
if (event.status) {
console.log('Result: ', result);
window.setTimeout(displayDSButton, 2000);
document.getElementById("spinner").style.display = "none";
alert('Upload to CLM Complete');
}else {
document.getElementById("spinner").style.display = "none";
j$('#errorText').text(event.message);
j$('#errorDialog').modal();
}
}, { escape: false, timeout: 30000, buffer: false }
);
}
});
And in the VF Controller or Controller Helper class here is how to setup the custom button
- FormButton HTMLButtonSubmit = new FormButton(dummyRedirectURL, customJS, 'Send', 'Send');form.HTMLButtonSubmit = HTMLButtonSubmit;
- form.HTMLButtonSubmit = HTMLButtonSubmit;
- String dummyRedirectURL = 'https://localhost';
String customJs = '$.ajax({url:\"https://websvcs.quikforms.com/HTMLFormViewTrans/v5500/QFVGetPDF.aspx?Edit=FALSE?\", type: \'POST\', data:$(\'#QFVFormPage\').serialize(),success : function(data) { window.parent.postMessage(JSON.stringify(GetPrintData(false,false,true)), \'*\') }});';
Timeout Configuration
- In the class, before sending the request to the http service
1 HttpRequest req = new HttpRequest();2 req.setTimeout(120000); // timeout in milliseconds- In the Visualforce page, on the call to the remote action
- We recommend increasing to the max of 120000 milliseconds