bronco-info.portlet-definition.xml

content.html

        <script src="/resource-server/webjars/vue/dist/vue.min.js"></script>
        <script src="/resource-server/webjars/uportal__api-template-vue/dist/api-template-vue.min.js"></script>

        <api-template-vue data-api-url="/uPortal/api/v5-0/people/me">
        <div class="bronco-info-container container">
            <style type="text/css">
            .well {
                min-height: 20px;
                margin-bottom: 20px;
                background-color: #f5f5f5;
                border: 1px solid #e3e3e3;
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            }

            .well-sm {
                padding: 9px;
                border-radius: 3px;
            }

            .well {
                text-align: center;
            }
            </style>
            <div class="row">
                <div class="col-sm-6">
                    <div class="well well-sm">
                        <strong>BroncoName:</strong> {{ data.username[0] }}
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="well well-sm">
                        <strong>BroncoNumber:</strong> {{ data.calstateEduPersonEmplID[0] }}
                    </div>
                </div>
            </div>
        </div>
        </api-template-vue>