How to include custom record banner and fields

Knowledge base
, ,
1

This article provides the user with details on how to include the fields in the record banner in the new AgileApps user interface. Users can include the following script in the formscript of an object.

// Reusable script functions

function insertBanner() {

    var bannerContent = `

        <div class="custom-banner-0" style="box-shadow:0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); background-color:#FFF; padding:10px 20px; margin:10px auto">

        <h2>Nulla malesuada sagittis mollis. Nullam augue mauris,</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod leo feugiat nisi vehicula varius. Sed nec neque ac lorem luctus malesuada. Nulla malesuada sagittis mollis. Nullam augue mauris, semper vel lobortis eget, mollis sit amet nunc. Mauris urna sapien, accumsan in eros sit amet, sodales egestas tortor. Duis eget malesuada sem. </p>

        <dl>

        <dt>Subject</dt>

        <dd>${getTextFieldValue(_sdForm, 'subject')}</dd>

        <dt>Description</dt>

        <dd>${getTextFieldValue(_sdForm, 'description')}</dd>

        </dl>

        </div>

        `;

    var $insertPoint = $('.record-detail-container aac-record-form').parents('.mat-card');

    var $existingBanner0 = $('.record-detail-container .custom-banner-0');

    if ($existingBanner0.length) {

        $existingBanner0.replaceWith(bannerContent);

    } else {

        $(bannerContent).insertBefore($insertPoint);

    }

}

// On Load & On Save

insertBanner();