On the My Account page, there is an update message box. We can add a functionality to update the message box section dynamically.
- Create an extension
- Add the new field under the extension of the configuration record.
- New field is added using configuration file
- Fetched the value of an important message from the configuration record in the extension tab.
- updated the view file to obtain the message inside the field in the configuration record.
- Then display the message in the lab dashboard page by updating the TPL file.
- Deploy all the changes in the extension to perform the functionality.
Configuration file:
{
"type": "object",
"properties": {
"Dashboard.Importantupdate": {
"group": "extensions",
"subtab": "Dashboard_subtab",
"type": "string",
"title": "Important Update",
"description": "Enter the message",
"default": "We can update the message by changing the field Important update in configuration field"
}
}
}
View file
// @module jj.Dashboard.Dashboard
define('jj.Dashboard.Dashboard.View'
, [
'jj_dashboard_dashboard.tpl'
, 'Backbone', 'Profile.Model', 'Utils'
]
, function (
jj_dashboard_dashboard_tpl
, Backbone, ProfileModel, Utils
) {
'use strict';
// @class jj.Dashboard.Dashboard.View @extends Backbone.View
return Backbone.View.extend({
template: jj_dashboard_dashboard_tpl,
title: _('Lab Dashboard')
//@property {String} page_header
, page_header: _('Lab Dashboard') //1.0.6
, initialize: function (options, model) {
var self = null;
try {
self = this;
this.application = options.application;
this.reimpressionsCount = options.reimpressionsCount;
this.application.getLayout().once('afterAppendView', this.addPageHeader); //1.1.0
this.application.getLayout().once('afterAppendToDom', this.addPageHeader); //1.1.0
console.log(this.model, 'model')
this.getVoucherNumbers(); //1.2.1
}
catch (e) {
SC.Library.errorHandler('Dashboard.View', 'initialize', e);
}
}
, events: {
}
, bindings: {
}
, childViews: {
},
//add the breadthcrum for this page
getBreadcrumbPages: function () {
var breadcrumbs = [];
try {
breadcrumbs.push({ text: 'dashboard', href: '/dashboard' });
}
catch (e) {
Library.errorHandler('Dashboard.View', 'getBreadcrumbPages', e);
}
return breadcrumbs;
},
//The function execute when exist from the extension.Used For Remove the class name
destroy: function () {
try {
jQuery('.content-wrapper-div-myaccount').removeClass("dashboard");
}
catch (e) {
SC.Library.errorHandler('Dashboard.View', 'destroy', e);
}
},
//@method getContext @return jj.Dashboard.Dashboard.View.Context
, getContext: function getContext() {
var Dashboard = SC.CONFIGURATION.Dashboard.Importantupdate;
//@class jj.Dashboard.Dashboard.View.Context
this.message = this.message || 'Hello World!!'
return {
ImportantMessage: Dashboard,
};
}
});
});
TPL file:
<section class="dashboard-info-card">
<div class="dashboard-info-head ">
<h2 class="dashboard-info-head-text">{{companyname}} Dashboard</h2>
<p class="dashboard-info-text">Please select your board</p>
</div>
<div class="dashboard-info-content-card">
<div class="dashboard-info-content-cards-main book">
<a class="" href="dashboard/bookpatient" target="" data-id="dashboard">
<div class="dashboard-info-content-cards book">
<div class="dashboard-info-content-cards-icon-main book">
<img src="../SSP Applications/NetSuite Inc. - SCA 2021.2.0/Development/En_book.png" alt="En_book" />
</div>
<div class="dashboard-info-content-cards-text-main book">
<h4>Book</h4>
<p>Book your Patient</p>
</div>
</div>
</a>
</div>
<div class="dashboard-info-content-cards-main manage">
<a class="" href="dashboard/manage" target="" data-id="dashboard">
<div class="dashboard-info-content-cards manage">
<div class="dashboard-info-content-cards-icon-main manage">
<img src="../SSP Applications/NetSuite Inc. - SCA 2021.2.0/Development/En_manage.png" alt="En_book" />
</div>
<div class="dashboard-info-content-cards-text-main manage">
<h4>Manage</h4>
<p>Manage Your Existing Cases</p>
</div>
</div>
</a>
</div>
<div class="dashboard-info-content-cards-main complete">
<a class="" href="dashboard/cases?caseType=completed" target="" data-id="dashboard">
<div class="dashboard-info-content-cards complete">
<div class="dashboard-info-content-cards-icon-main complete">
<img src="../SSP Applications/NetSuite Inc. - SCA 2021.2.0/Development/En_complete.png" alt="En_book" />
</div>
<div class="dashboard-info-content-cards-text-main complete">
<h4 id='completedVouchers'>Completed ({{completedVouchers}})</h4>
<p>Completed Cases</p>
</div>
</div>
</a>
</div>
<div class="dashboard-info-content-cards-main in-progress">
<a class="" href="dashboard/cases?caseType=inprogress" target="" data-id="dashboard">
<div class="dashboard-info-content-cards in-progress">
<div class="dashboard-info-content-cards-icon-main in-progress">
<img src="../SSP Applications/NetSuite Inc. - SCA 2021.2.0/Development/En_progress.png" alt="En_book" />
</div>
<div class="dashboard-info-content-cards-text-main in-progress">
<h4 id='inprogress-dashboard'>In Progress ({{inProgressVouchers}})</h4>
<p>Cases in Progress</p>
</div>
</div>
</a>
</div>
</div>
{{#if Update}}
<div class="import-update">
<h3 class="import-update-head">Important Update</h3>
<div class="important-update-body">
<h4 class="important-update-body-head">Important Update</h4>
<p class="important-update-body-text">
{{ImportantMessage}}
</p>
</div>
</div>
{{/if }}
</section>
<script>
$(document).ready(function () {
copybreadthcrumb()
setTimeout(function () { resizeheight() }, 10)
setTimeout(function () { resizeheight() }, 10)
setTimeout(function () { resizeheight() }, 10)
setTimeout(function () { resizeheight() }, 10)
setTimeout(function () { resizeheight() }, 10)
});
$(window).on('hashchange', function (e) {
copybreadthcrumb()
});
function copybreadthcrumb() {
$(".myaccount-layout .myaccount-layout-header").addClass('my-account')
}
$(window).resize(function () {
setTimeout(function () { resizeheight() }, 10);
});
$(window).on('hashchange', function (e) {
console.log('anikskdj')
resizeheight()
setTimeout(function () { resizeheight() }, 10);
});
function resizeheight() {
if (window.innerWidth >= 768) {
var mainheight = $("#content-wrapper-side-nav").height()
console.log(mainheight)
$(".myaccount-layout-side-nav").css('min-height', mainheight);
} else {
$(".myaccount-layout-side-nav").css('height', 'auto');
}
}
</script>
<!--
Available helpers:
{{ getExtensionAssetsPath "img/image.jpg"}} - reference assets in your extension
{{ getExtensionAssetsPathWithDefault context_var "img/image.jpg"}} - use context_var value i.e. configuration variable. If it does not exist, fallback to an asset from the extension assets folder
{{ getThemeAssetsPath context_var "img/image.jpg"}} - reference assets in the active theme
{{ getThemeAssetsPathWithDefault context_var "img/theme-image.jpg"}} - use context_var value i.e. configuration variable. If it does not exist, fallback to an asset from the theme assets folder
-->