Doc-Gen

The main goal of Doc-Gen (document generation) process is to convert an html file into a pdf, further providing a URL in API response to open the document in PDF format. The action is facilitated by triggering external API’s using dynamic data with a predefined structure through a custom webhook. This functionality has been introduced to enhance feasibility by generating pdf document from raw html content on the basis of customer requirement.

This document generation functionality embedded in the custom webhook is mainly applicable to outbound flows only. The API is triggered through the following URL:-

http://10.15.0.135:8003/htmlConvert/api/generate

along with the following parameters in the form of key-value pairs as a JSON body:-

{    
    "htmlValue":"<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>Boarding Pass</title><style>body {background-color: #9299A0;text-align: center;}.ticket {display: inline-block;width: 350px;margin: 20px;background-color: #273138;border-radius: 10px;color: #fff;font-weight: 300;letter-spacing: 1px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}.ticket header {position: relative;height: 35px;background-color: #1B252E;padding: 10px;border-radius: 10px;}.ticket header .company-name {line-height: 35px;text-align: left;}.ticket header .gate {position: absolute;right: 15px;top: 10px;font-weight: 400;line-height: 18px;text-align: center;font-size: 12px;}.ticket header:after,.ticket header:before {content: '';width: 16px;height: 16px;background-color: #fff;position: absolute;bottom: -8px;border-radius: 50%;box-shadow: inset 12px 0px 18px -11px rgba(0, 0, 0, 0.5);}.ticket header:after {right: -8px;}.ticket header:before {left: -8px;}.ticket .airports {padding: 5px 10px 30px 10px;height: 100px;text-align: center;position: relative;border-bottom: 2px dashed #000;}.ticket .airports .airport {position: relative;margin: 10px;text-align: center;display: inline-block;}.ticket .airports .airport .airport-name {font-weight: 400;}.ticket .airports .airport .airport-code {font-size: 32px;font-weight: 400;margin: 5px 0;}.ticket .airports .airport .dep-arr-label {color: #9299A0;font-weight: 500;}.ticket .airports .airport .time {font-size: 12px;color: #9299A0;}.ticket .airports .airport:first-child {margin-right: 40%;}.ticket .airports .airport:first-child:after {color: #353E48;content: '\f072';position: absolute;font-size: 55px;top: calc(50% - 25px);right: -150%;}.ticket .airports:after,.ticket .airports:before {content: '';width: 16px;height: 16px;background-color: #fff;position: absolute;bottom: -8px;border-radius: 50%;box-shadow: inset 12px 0px 18px -11px rgba(0, 0, 0, 0.5);}.ticket .airports:after {right: -8px;}.ticket .airports:before {left: -8px;}.ticket .place {padding: 10px;text-align: center;height: 330px;}.ticket .place-block {display: inline-block;margin: 10px 30px;}.ticket .place-block .place-label {text-transform: uppercase;font-weight: 400;font-size: 14px;margin-bottom: 10px;}.ticket .place-block .place-value {color: #9299A0;font-weight: 500;}.ticket .qr {width: 220px;height: 220px;margin: 20px auto;border-radius: 10px;overflow: hidden;}.ticket .qr img {width: 100%;height: 100%;}.ticket.inverse {background-color: #F8F8F8;}.ticket.inverse header {background-color: #0f50b4;}.ticket.inverse .airports {border-bottom-color: #D3D6DA;}.ticket.inverse .airport:first-child:after {color: #D3D6DA;}.ticket.inverse .airport .airport-code {color: #707884;font-weight: 500;}.heading {color: #ff4d23;}.inv-heading {color: #0f50b4;}</style></head><body><div class='ticket'><header><div class='company-name'>American Airlines</div><div class='gate'><div>Gate</div><div>B4</div></div></header><section class='airports'><div class='airport'><div class='airport-name heading'>Delhi</div><div class='airport-code'>$flow.key.origin</div><div class='dep-arr-label'>Departing</div><div class='time'>7:45am</div></div><div class='airport'><div class='airport-name heading'>Mumbai</div><div class='airport-code'>$flow.key.destination</div><div class='dep-arr-label'>Arriving</div><div class='time'>9:15am</div></div></section><section class='place'><div class='place-block'><div class='place-label heading'>Group</div><div class='place-value'>2</div></div><div class='place-block'><div class='place-label heading'>Seat</div><div class='place-value'>2A</div></div><div class='place-block'><div class='place-label heading'>Term</div><div class='place-value'>B</div></div><div class='qr'><img src='http://www.classtools.net/QR/pics/qr.png' alt='QR Code'></div></section></div><div class='ticket inverse'><header><div class='company-name'>American Airlines</div><div class='gate'><div>Gate</div><div>B4</div></div></header><section class='airports'><div class='airport'><div class='airport-name inv-heading'>Delhi</div><div class='airport-code'>$flow.key.origin</div><div class='dep-arr-label'>Departing</div><div class='time'>7:45am</div></div><div class='airport'><div class='airport-name inv-heading'>Mumbai</div><div class='airport-code'>$flow.key.destination</div><div class='dep-arr-label'>Arriving</div><div class='time'>9:15am</div></div></section><section class='place'><div class='place-block'><div class='place-label inv-heading'>Group</div><div class='place-value'>2</div></div><div class='place-block'><div class='place-label inv-heading'>Seat</div><div class='place-value'>2A</div></div><div class='place-block'><div class='place-label inv-heading'>Term</div><div class='place-value'>B</div></div><div class='qr'><img src='http://www.classtools.net/QR/pics/qr.png' alt='QR Code'></div></section></div>      </body></html>",
    "type":"pdf",
    "accountIdentifier":"test",
    "timestamp":"",
    "s3Url":"",
    "htmlEncoded":false
}

This structure includes the following details:-

htmlValue: This key contains an html value that is to be converted into a document.
type: This contains the type of format in which document is to be generated. (only 1 format type as of now)
accountIdentifier: This field contains name of the account.
htmlEncoded: Information that states whether html content is encoded or not.

NOTE:- timestamp and s3Url fields are left empty as they are updated automatically in the database.

A URL is received as response after triggering API through which pdf format of the received document can be obtained. This response is saved as a mapped value in a flow variable in the form of JSON therefore facilitating the use of this URL as a flow variable in other widgets.

This response URL in the custom webhook is then pushed as a notification which upon clicking displays the required pdf document.