Building Custom Content Components

Before you start building a custom content component, it's important to determine its purpose and functionality. What information or data should it display? What actions should it enable? What kind of visual design should it have? Answering these questions will help you create a component that is both useful and visually appealing.

Step 2: Create the Visualforce Page

The first step in building a custom content component is creating the Visualforce page that will display your component. This page should contain the HTML and CSS needed to render your component's visual design, as well as the Apex code that will retrieve and manipulate the data needed to display your component's content.

Step 3: Create the Apex Controller

Next, you'll need to create an Apex controller that will handle the logic needed to retrieve and manipulate data for your component. This controller should implement the KaptioTravel.IComponentHandler interface and define the getBody() and isEmpty() methods.

Step 4: Test Your Component

Once you've created your Visualforce page and Apex controller, it's time to test your component. You can do this by creating a new document template in Kaptio and adding your component to it. Make sure to test your component thoroughly and fix any bugs or issues you encounter.

Step 5: Add Your Component to a Document Template

Once you've tested and refined your component, it's time to add it to a document template. To do this, simply edit the template and drag your component into the desired location. Make sure to save your changes and test your template to ensure that your component is working as intended.

Conclusion

Building custom content components can be a challenging but rewarding process. By following the steps outlined in this guide, you'll be able to create components that are both useful and visually appealing, and that help to enhance the overall quality of our document templates. Good luck!

Custom content components provide you with more flexibility when designing your document templates. Learn how to create these components here.

Code Sample

The following is an example ofa simple custom component that shows payment information using information from the Itinerary.

Please note: The context of custom content component is always the Itinerary. You cannot determine which stage type of the document they are within.

For any display logic dependent on stage type, we recommend that the main document layout contains a class on the body tag that contains the name or type of the stage and target via css.
For logic reliant on Stage Type we recommend creating a base component for the most common use case and then an additional component for each stage needed, with it’s own extention class that uses the base comoponent for all logic but overrides the stage type for it’s queries.

Apex Class

/**
* @author Vadim
* @date 2016/08/01
* @description Sample class for a custom content components
*/

global without sharing class KTD_CustomContentController implements KaptioTravel.IComponentHandler {

    @description A KaptioTravel__Itinerary__c record
    public KaptioTravel__Itinerary__c itinerary { get; private set; }

    @description Id of context Itinerary. Used to populate the itinerary variable.
    private Id itineraryId { get; set; }


    global KTD_CustomContentController() {

        if(ApexPages.currentPage() != null){
            this.itineraryId = ApexPages.currentPage().getParameters().get('id');
            if(Schema.KaptioTravel__Itinerary__c.SObjectType == this.itineraryId.getSobjectType()) {
                init(this.itineraryId);
            }
        }
    }

    public void init(Id p_id) {

        try {
            this.itineraryId = p_id;

            this.itinerary = [
                SELECT Id, Name, CurrencyIsoCode, KaptioTravel__Name_on_booking__c, KaptioTravel__VersionNumber__c, Owner.Name, KaptioTravel__Group_Size__c,
                KaptioTravel__Amount_Per_Person__c, KaptioTravel__Itinerary_Amount__c, KaptioTravel__Transaction_Amount__c, KaptioTravel__Outstanding__c,
                KaptioTravel__FinalPaymentExpectedDate__c, KaptioTravel__BookingNumber__c, KaptioTravel__Channel__r.KaptioTravel__Brand__r.Name,
                KaptioTravel__Channel__r.KaptioTravel__ChannelCode__c, KaptioTravel__Primary_Contact__r.Account.BillingCountry,
                KaptioTravel__Primary_Contact__r.Account.BillingState, KaptioTravel__Primary_Contact__r.Account.BillingCity,
                KaptioTravel__Primary_Contact__r.Account.BillingPostalCode, KaptioTravel__Primary_Contact__r.Account.BillingStreet,
                KaptioTravel__Primary_Contact__r.Account.BillingAddress, KaptioTravel__ResellerCommissionTotal__c, KaptioTravel__ResellerCommissionTaxTotal__c,
                FROM KaptioTravel__Itinerary__c
                WHERE Id = :this.itineraryId
            ];


        } catch (Exception e) {
            System.debug('KTD_CustomContentController ERROR: ' + e.getMessage() + '; Stack Trace: ' + e.getStackTraceString());
        }
    }

     /**
    * @description Required function for the IComponentHandler interface. Defines the VF page used as output for the component. Defined here to allow the content engine to create a html string from the components output
    * @return String HTML output generated from the VF page and data from this controller
    **/
    public String getBody() {
        PageReference pref = Page.KTD_CustomComponent;
        pref.getParameters().put('id', this.itineraryId);
        Blob content = System.Test.isRunningTest() ? Blob.valueOf('Test') : pref.getContent();

        return content.toString();
    }

    /**
    * @description Required function for the IComponentHandler interface. If returns true, then the component will not render.
    * @return Boolean
    **/
    public Boolean isEmpty(){
        return false;
    }

}

Visualforce page

<apex:page showHeader="false" sidebar="false" standardStylesheets="false" lightningStylesheets="false" docType="html-5.0"
    controller="KTD_CustomContentController " id="KTD_CustomContent">

    <div class="comonent-content">

        <div class="info-section">
            <div class="balance-info">
                <div class="column-item">
                    <div class="column-item-label">Total:</div>
                    <div class="column-item-desc">USD
                        <apex:outputText value="{0,number,###,###,##0.00}">
                            <apex:param value="{!itinerary.KaptioTravel__Itinerary_Amount__c}" />
                        </apex:outPutText>
                    </div>
                </div>

                <div class="column-item b2b-commission">
                    <div class="column-item-label">Commission:</div>
                    <div class="column-item-desc">USD
                        <apex:outputText value="{0,number,###,###,##0.00}">
                            <apex:param value="{!itinerary.KaptioTravel__ResellerCommissionTotal__c}" />
                        </apex:outPutText>
                    </div>
                </div>
                <div class="column-item b2b-commission">
                    <div class="column-item-label">Reseller Commission Tax:</div>
                    <div class="column-item-desc">USD
                        <apex:outputText value="{0,number,###,###,##0.00}">
                            <apex:param value="{!itinerary.KaptioTravel__ResellerCommissionTaxTotal__c}" />
                        </apex:outPutText>
                    </div>
                </div>
                <!-- -->
                <div class="column-item">
                    <div class="column-item-label">Payment Received:</div>
                    <div class="column-item-desc">USD
                        <apex:outputText value="{0,number,###,###,##0.00}">
                            <apex:param value="{!itinerary.KaptioTravel__Transaction_Amount__c}" />
                        </apex:outPutText>
                    </div>
                </div>

                <div class="column-item">
                    <div class="column-item-label">Outstanding Balance:</div>
                    <div class="column-item-desc">USD
                        <apex:outputText value="{0,number,###,###,##0.00}">
                            <apex:param value="{!itinerary.KaptioTravel__Outstanding__c}" />
                        </apex:outputText>
                    </div>
                </div>

               <div class="column-item">
                    <div class="column-item-label">Outstanding Balance due date:</div>
                    <div class="column-item-desc">
                        <b>
                            <apex:outputText value="{0,date, d MMMM YYYY}">
                                <apex:param value="{!itinerary.KaptioTravel__FinalPaymentExpectedDate__c}" />
                            </apex:outputText>
                        </b>
                    </div>
                </div>

            </div>
        </div>
    </div>
</apex:page>

How to Create Custom Content Components
Code Sample & Step-by-step Guide
Step 1: Determine the Component's Purpose and Functionality
Step 2: Create the Visualforce Page
Step 3: Create the Apex Controller
Step 4: Test Your Component
Step 5: Add Your Component to a Document Template
Conclusion
Code Sample
Apex Class
Visualforce page