vlocity - onclick javascript button on omniscript dataraptor post action

HTML template Id:  sendEmail.html
element Id: OppUpdateEmailConga

give HTML template Id to the dataraptor post action html template section.


place the below code in omniscript configuration


CUSTOM HTML TEMPLATES:

<style>
.inputpremium{
display:none;
}
.via-slds ng-form.ng-valid span.vlc-asterix.icon-v-asterix:before{
color: #50e3c2
}
    .vlc-slds--tertiary-container{
    visibility:hidden;
    }
    div[comma-value]{
      position:relative;
      font-weight: 600;
    }
    div[comma-value]:before{
      content: attr(comma-value);
      position:absolute;
      left:0;
    }
    div[comma-value] input{
      color:#fff;
    }
    </style>
    <script>
        baseCtrl.prototype.$scope.$root.updatepremium = function() {
            updatecommify();
        }

        baseCtrl.prototype.$scope.$root.sendEmail= function() {
            sendEmail();
        }

</script>
<script type="text/ng-template" id="downloadstepoverride.html">
        <div class="slds-grid vlc-slds-step--container" vlc-slds-window-scroll="test">
 
 
            <section id='{{::child.name}}'
                    ng-show='child.bAccordionActive && child.bAccordionOpen'
                    class="step-step slds-size--1-of-1">
 
                <!-- banner template -->
                <vlc-slds-banner></vlc-slds-banner>
 
                <!-- article when embedded in omniscript -->
                <vlc-slds-embedded-article></vlc-slds-embedded-article>
 
                <form novalidate
                    role='form'
                    stepForm
                    name='{{::bpTree.sOmniScriptId}}-{{$index}}'
                    id='{{::bpTree.sOmniScriptId}}-{{$index}}'
                    vlc-slds-disable-auto-complete="testing"
                    class='slds-grid slds-wrap'>
 
                    <!-- child controls in the step new comment-->
                    <div class='slds-col--padded slds-size--1-of-1'>
                        <div  class="slds-grid slds-wrap slds-grid--pull-padded">
                            <child vlc-slds-change-inline-templates="::child.eleArray[0].propSetMap.showInputWidth"
                                class="slds-size--1-of-1 slds-medium--1-of-1 slds-large-size--{{child.eleArray[0].propSetMap.controlWidth}}-of-12"
                                ng-repeat='child in ::children = child.children'
                                ng-show='::!child.eleArray[0].propSetMap.hide'
                                ng-if='(child.eleArray[0].propSetMap.hide && child.eleArray[0].type!=="Formula")||(!child.eleArray[0].propSetMap.show || evaluateShow(child.eleArray[0], this))'>
                            </child>
                        </div>
                    </div>
 
                    <div class='slds-col--padded slds-size--1-of-1 slds-m-top--medium slds-m-bottom--medium'>
 
                        <div class='slds-grid slds-wrap vlc-slds-button--footer'>
 
                            <div class='vlc-slds--tertiary-container'>
 
                                <div class='vlc-slds-button--tertiary'
                                    ng-if='child.bAccordionActive'
                                    confirmed-click='cancel()'
                                    ng-confirm-click='{{::child.propSetMap.cancelMessage}}'>
                                    {{::child.propSetMap.cancelLabel}}
                                </div>
 
                                <!-- test -->
                                <div ng-show='!child.bHasNext'
                                    class='vlc-slds-button--tertiary'
                                    ng-if='bpTree.scriptState == "saveAndResume" && child.bAccordionActive'
                                    vlc-animation-slider="test"
                                    confirmed-click='completeScript(true)'
                                    ng-confirm-click='{{::child.propSetMap.completeMessage}}'>
                                    {{::child.propSetMap.completeLabel}}
                                </div>
 
 
                                <div class='vlc-slds-button--tertiary'
                                    ng-if='bpTree.propSetMap.allowSaveForLater && bpTree.scriptState !== "review" && child.bAccordionActive'
                                    confirmed-click='saveForLater(child)'
                                    ng-confirm-click='{{::child.propSetMap.saveMessage}}' >
                                    {{::child.propSetMap.saveLabel}}
                                </div>
 
                            </div>
 
                            <div class='slds-size--1-of-1 slds-medium-size--6-of-12'>
 
                                <div class='slds-grid slds-wrap slds-grid--pull-padded vlc-slds-small--size-column' style="justify-content:flex-end">
                     
                        <!-- OMNI:2008 -->
                        <div ng-if='child.bHasPrevious'
                        class='slds-size--1-of-1 slds-medium-size--{{::child.propSetMap.previousWidth}}-of-12 vlc-slds-remote-action--button'>
 
                        <div class="slds-form-element__control">
 
                            <div class="vlc-control-wrapper">
                         
                            <div
                                id="{{::child.name + '_prevBtn'}}"
                                class="slds-box vlc-slds-box--neutral"
                                ng-click='sidebarNav(bpTree.children[bpTree.response.lastStepNo])'
                                aria-hiddens="true"
                                vlc-animation-slider="test"
                                reverse="true">
 
                                <p>
                                {{::child.propSetMap.previousLabel}}
                                </p>
 
                            </div>
 
                            </div>
 
                        </div>
 
                        </div>
 
                                    <div ng-if='child.bHasNext'
                        class='slds-size--1-of-1 slds-medium-size--{{::child.propSetMap.nextWidth}}-of-12 vlc-slds-remote-action--button'>
 
                                        <div class="slds-form-element__control">
 
                                            <div class="vlc-control-wrapper">
 
                                                <div
                                id="{{::child.name + '_nextBtn'}}"
                                ng-click='nextRepeater(child.nextIndex, child.indexInParent)'
                                                    ng-disabled='checkValidity(this, child.index, child.indexInParent, "Step", null, true)'
                                                    vlc-animation-slider='test'
                                                    class='slds-box'>
                                                    <p>{{::child.propSetMap.nextLabel}}</p>
                                                </div>
 
                                            </div>
                                        </div>
 
                                    </div>
 
                                </div>
 
                            </div>
 
                        </div>
 
                    </div>
 
                </form>
            </section>
        </div>
</script>
<script type="text/ng-template" id="dandopremiumoverride.html">
        <div class="slds-col--padded slds-size--1-of-1">
            <ng-form name='loopform'
                     class='slds-form-element vlc-flex vlc-slds-text-block vlc-slds-rte'
                     id='{{::child.eleArray[0].name}}'>
     
                <label class='slds-form-element__label'>
                </label>
     
                <div class="slds-form-element__control">
                    <p>
                        <h5>
                            <strong>&nbsp;</strong>Premium:&nbsp; <strong>&nbsp; &nbsp;{{bpTree.response.QuickQuote.Block1|n.DNOPremium | currency:"USD$"}}&nbsp;</strong>
                        </h5>
                    </p>
                </div>
            </ng-form>
        </div>
</script>
<script type="text/ng-template" id="premiumcalculationoverride.html">
    <div class='slds-col--padded slds-size--1-of-1'>
 
        <ng-form name='loopform'
                 class='slds-form-element vlc-flex vlc-form-group vlc-slds-remote-action--button'
                 ng-repeat='control in child.eleArray'>
 
            <div class="slds-form-element__control">
 
                <div class="vlc-control-wrapper">
 
                    <div id='{{::control.name}}'
                         class='slds-box'
                         title='{{::control.propSetMap.label}}'
                         ng-click='buttonClick(this.bpTree.response, control, this);$root.updatepremium();'>
                        <p>{{::control.propSetMap.label}}</p>
                    </div>
 
                </div>
 
                <div class='vlc-sub-block'></div>
 
            </div>
 
        </ng-form>
 
    </div>
 
</script>
<script type="text/ng-template" id="quickquoteblockoverride.html">
    <div class="slds-col--padded slds-size--1-of-1">
     
            <ng-form name='loopform'
                     class='slds-form-element vlc-flex slds-clearfix vlc-slds-block'
                     id ='{{::control.name}}'
                     ng-repeat='control in child.eleArray' >
     
                <div class="slds-form-element__control">
     
                    <!-- add block label -->
                    <label vlc-slds-toggle="toggle"
                           class="slds-form-element__label slds-clearfix" ng-if="::control.propSetMap.label">
     
                        <slds-svg-icon aria-hidden="true"
                                       sprite="'utility'"
                                       icon="'chevrondown'"
                                       size="'small'"
                                       extra-classes="'vlc-slds-collapse slds-button__icon slds-button__icon--large'">
                        </slds-svg-icon>
     
                        <slds-svg-icon aria-hidden="true"
                                       sprite="'utility'"
                                       icon="'chevronup'"
                                       size="'small'"
                                       extra-classes="'vlc-slds-expand slds-button__icon slds-button__icon--large'">
                        </slds-svg-icon>
     
     
                        <div class="slds-form-element__label--toggleText">
                            {{::control.propSetMap.label}}
                            <span ng-if='!( $first && $last )'>{{control.index+1}}</span>
                        </div>
                     
                        <div class="vlc-slds-control-action__container" vlc-bubble-canceller="testing">
     
                            <span ng-if='::control.propSetMap.repeat'
                                  ng-click='baseCtrl.addItem(this, child, $index)'
                                  aria-hidden="true">
                                {{::customLabels.OmniAdd}}
                            </span>
     
                            <span ng-if='child.eleArray.length > 1'
                                  ng-click='removeDomElement(this, child, $index)'
                                  vlc-slds-remove-item="ng-form.vlc-slds-block"
                                  aria-hidden="true">
                                {{::customLabels.OmniDelete}}
                            </span>
     
                        </div>
     
                    </label>
     
                 
                    <!-- block withing the main grid  ng-hide hides hthe block by default-->
                    <div class='slds-size--1-of-1 ng-hide'
                         vlc-slds-toggle-elem='visible'>
     
                        <div class="vlc-slds-control-action__container" vlc-bubble-canceller="test" ng-if="::!control.propSetMap.label">
     
                            <span ng-if='::control.propSetMap.repeat'
                                  ng-click='baseCtrl.addItem(this, child, $index)'
                                  aria-hidden="true">
                                  Add Alternative
                            </span>
     
                            <span ng-if='child.eleArray.length > 1'
                                  ng-click='removeDomElement(this, child, $index)'
                                  vlc-slds-remove-item="ng-form.vlc-slds-block"
                                  aria-hidden="true">
                                {{::customLabels.OmniDelete}}
                            </span>
     
                        </div>
     
                        <div  class="slds-grid slds-wrap slds-grid--pull-padded">
                            <child vlc-slds-change-inline-templates="::child.eleArray[0].propSetMap.showInputWidth"
                                   class="slds-size--1-of-1 slds-medium--1-of-1 slds-large-size--{{child.eleArray[0].propSetMap.controlWidth}}-of-12"
                                   ng-repeat='child in ::children = control.children'
                                   ng-show='::!child.eleArray[0].propSetMap.hide'
                                   ng-if='(child.eleArray[0].propSetMap.hide && child.eleArray[0].type!=="Formula")||(!child.eleArray[0].propSetMap.show || evaluateShow(child.eleArray[0], this))'>
                            </child>
                        </div>
                    </div>
     
                </div>
     
            </ng-form>
     
        </div>     
</script>
<script type="text/ng-template" id="sendEmail.html">
<div class='slds-col--padded slds-size--1-of-1'>

    <ng-form name='loopform'
             class='slds-form-element vlc-flex vlc-form-group vlc-slds-remote-action--button'
             ng-repeat='control in child.eleArray'>

        <div class="slds-form-element__control">

            <div class="vlc-control-wrapper">

                <div id='OppUpdateEmailConga'
                     class='slds-box'
                     title='{{::control.propSetMap.label}}'
                     ng-click='buttonClick(this.bpTree.response, control, this);$root.sendEmail();'>
                    <p>{{::control.propSetMap.label}}</p>
                </div>

            </div>

            <div class='vlc-sub-block'></div>

        </div>

    </ng-form>


</div>  </script>





CUSTOM JAVASCRIPT:

function updatecommify(){
        setTimeout(updatecommifydelay, 1000);
    }
function updatecommifydelay(){
        var slides = document.getElementsByClassName("inputpremium");
        for (var i = 0; i < slides.length; i++) {
            commify(slides.item(i));
        }
    }
    function commify(target) {
        var value = target.value;
        var chars = value.split("").reverse();
        var withCommas = [];
        for (var i = 1; i <= chars.length; i++) {
            withCommas.push(chars[i - 1]);
            if (i % 3 == 0 && i != chars.length) {
                withCommas.push(",");
            }
        }
        var val = withCommas.reverse().join("");
        val = '$' + val;
        target.parentNode.setAttribute("comma-value", val)
    }
function sendEmail() {
//Custom logic here  //Access to Data JSON with baseCtrl.prototype.$scope.bpTree.response
alert('Quote has been sent');
 }