Adding Link to the button using configuration record.

• Create new page in My account in extension js modules like,open js module and crete extra file for new page name as jj.three.three.router.js. We can create page by using the router .
• In router file with view file and model file names required for data and server links (URL).view file links with tpl file(jj_three_three_tpl) of extension for getting data .view.showContent() is used for showing the content ,if remove that function content was cannot display . Here “preorderss” is URL of created page .
• In Entry file I created new tab in my account page for linking the URL of page ,without creating the tab we can link the URL must and should write the ruter file name in entry file then only the page will be working . Must and should Return the ruter file( return new jjthreethreerouter(container);
• In Roure file the preorder was used for call the function
• Preorder: function(){

var self = this;

var model =new Model();

console.log(model,’model’)

var view = new threeView({model:model, application:self.application});

view.showContent();

• we create any new file in js that file link with view file then only we get the data from tpl,And Model file .
• Entry file links with view file and view file links with tpl.

A
bove
pic line number 52-69 is for configuration in this task we have
create configuration for changing the link of the page from
configuration record .

The above pic for router creation

Add a button on my account transation detail page

• Add a link to that when we click that link it needs to navigate to a new page.
• Open you transation datil page in web site and inspect that find the class name and search in extension we get template file (transation_history_list.tpl).
• Copy that tamplate file name and search in your source code ,we get view file for the template and copy that view (TransactionHistory.list.view) . Paste in entry file.
• In extension tpl file we create button which palce to we required and link the Url of page with button by using herf. Same html editing we have to do in themes template (same name template).
• Run gulp extension:local check the button is working or not . If in case
  button not working reffer the pics or suite_app or kb. Then deploy
  it and active do same in theme like run local and deploy.

The link of the page neds to change from the configuration record

• default configuration was created by extension.
• In configuration code we can change the default in side of default value to our page URL

Commerce< website<configuration we can see the configuration record value.

If i made changes in configuration record that will be effect on web site like changing Url . After deploy extension and theme and activate it .

define(
	'jj.three.three'
,   [
		'jj.three.three.View','jj.three.three.router','TransactionHistory.List.View'
	]
,   function (
		threeView,jjthreethreerouter,TransactionHistoryListView
	)
{
	'use strict';

	return  {
		mountToApp: function mountToApp (container)
		{
			// using the 'Layout' component we add a new child view inside the 'Header' existing view 
			// (there will be a DOM element with the HTML attribute data-view="Header.Logo")
			// more documentation of the Extensibility API in
			// https://system.netsuite.com/help/helpcenter/en_US/APIs/SuiteCommerce/Extensibility/Frontend/index.html
			
			/** @type {LayoutComponent} */
			var layout = container.getComponent('Layout');
			
			/*if(layout)
			{
				layout.addChildView('Header.Logo', function() { 
					return new threeView({ container: container });
				});
			}*/
			var myaccountmenu = container.getComponent("MyAccountMenu");
			var preordersmenugroup = {
			     id: "newpagess",
			     name: "newpagess",
			     index: 6,
				 url: "preorderss",
			     permissionoperator: "OR",
			     permission: [
			         {
			             group: "transactions",
			             id: "tranSalesOrd",
			             level: "1"
			         },
			         {
			             group: "transactions",
			             id: "tranEstimate",
			             level: "1"
			         }
			     ]
			}

			myaccountmenu.addGroup(preordersmenugroup);
			_.extend(TransactionHistoryListView.prototype, {
				getContext: _.wrap(TransactionHistoryListView.prototype.getContext, function(fn) {
					try{
						var original = fn.apply(this,_.toArray(arguments).slice(1));
						//original.href='https://www.scatrainingbaglr1.cf/sca-dev-2022-1-0/my_account.ssp#/preorders'
						var links = SC.CONFIGURATION.three.config;
						//var somthing = links;
						
						//somthing.shift
						//connsole.log('original',original);
						console.log('link',links);
						//console.log(this.model);
						original.links=links;
						//console.log('original',original);
					}catch(e){
						console.log("err@barcode2View",e);
					}
					return original
					
				})
			}) 
			
        return new jjthreethreerouter(container);
		

		}
	};
});