Customer favorits

On the customer detail page every user can choose his favorit customer. Therefore a second table is necessary. By choosing the customer the userID and the accountID are written in this table. By releasing the customer the record is deleted. The green "Favorit" badge is displayed in the title line of catalog and detail page.

The favorit element:

• create a new table "exnotes" for the favorit
• generate a new datadefinition out of it

Following customer elements must be adapted:

• the SQL is joined to the new "exnotes" table
• HTML of the customer catalog record
• HTML of the customer detail record
• JavaScript for 2 buttons added

Support is available by discord: K8 Web Kit

The favorit badge is also added in the catalog

Existing prerequisites for your test:

• precedent exercise: customer catalog

Create a new datadefinition:

• datadefID: enter a new datadefID (exnotes)
• name: the displayed name
• table: (exnotes)

Save

Attention, it's not saved by a red box at the window bottom line! Only by the green "saved" message, you can continue.

Please have a look to the documentation of elements online.

You need to be registerted and logged in. Open "elements online" in your environement "Admin / elements online".

Copy the columns

Copy the columns here; goto elements online; delete the default columns; click in the tabulator columns; paste with ctrl-v this columns into the table.

Save table

Save your table. It will be created in your database.

Create datadefID

K8 Web Kit generates the datadefinition with the structure of the table, the tabulator list and the form elements.

excustomers.json (masterdata):

{ "sql_orderby": "name1 desc", "sql_additionals": { "select": { "searchcolumn": "concat_ws(',',accountnumber,excustomer.name1,excustomer.name2,excustomer.street,excustomer.country,excustomer.code,excustomer.city,excustomer.phone,excustomer.mobile,excustomer.email,excustomer.website,excustomer.fax,excustomer.facebook, case when ifnull(exnotes.ID,0)>0 then 'Favorit' end)", "note": "case when ifnull(exnotes.ID,0)>0 then 1 else 0 end", "notesID": "ifnull(exnotes.ID,0)", "categoryIDtext": "ifnull(t_categoryID.title,'')", "username": "ifnull(k8login.username,'')" }, "from": { "t_categoryID": { "table": "k8groups", "expression": "t_categoryID.groupID=excustomer.categoryID" }, "k8login": { "expression": "excustomer.creatorID=k8login.userID" }, "exnotes": { "expression": "exnotes.accountID=excustomer.accountID and exnotes.creatorID=§userID" } } } }

Choose your excustomer datadefintion, file: excustomer.json.

sql_orderby

The order should be by the customer name1.

Adapt sql_additionals:

in "select" add 2 columns:

• notesID
• note (0=no favorit, 1=favorit)

replace the column:

• searchcolumn: 'Favorit' is added

in "from" add element:

• exnotes
  • expression: (join to table: exnotes)

Save

Attention, it's not saved by a red box at the window bottom line! Only by the green "saved" message, you can continue.

Change the file excustomer_catalog_record.html!

This is an excerpt:

<div class="k8-link-main"> {{control_edit}} <a class="js_detaillink" onclick="localStorage.setItem('catalog_datadefID','#settings#datadefID#')" href="{{masterdata_url_detail}}">{{name1}}</a> {{control_delete}} <span data-v_if="Number(dat['note'])" class="badge bg-success ms-2">Favorit</span> </div>

The title row is extended:

• behind the {{control_delete}} the badge is appended; add the yellow line.

Save

Attention, it's not saved by a red box at the window bottom line! Only by the green "saved" message, you can continue.

excustomer_detail_record.html, excerpt:

<div class="row g-0 px-2 js_rec_head rec_head js_catalog"> <div class="col-sm-6 mt-2 js_title"> <h1>{{name1}}</h1> </div> <div class="col-sm-6 mt-3 mb-2 text-end"> <span data-v_if="Number(dat['note'])" data-v_mode="hide" class="js_note badge bg-success">Favorit</span> <span data-v_if="bCatalogCall()" class="my-1 my-md-2"> <a href="javascript:history.back()"><span class=""><i class="bi-arrow-left"></i></span> #ls#back to results#</a> </span> </div> </div>

The title row is extended:

• add the yellow line in the right section of the title row.

excustomer_detail_record.html, excerpt:

<div class="col-sm-6 pb-2"> <div class="k8-padding-side-small"> <div class="k8-content k8-padding-bottom-normal"> <table class="table table-bordered"> ... </table> <p>{{headdescription}}</p> <div class="text-end"> <button type="button" class="js_release btn btn-secondary" disabled>Release</button> <button type="button" class="js_mybtn btn btn-secondary" disabled>Choose</button> </div> </div> </div> </div>

Replace the button behind {{headdescription}}:

• add the yellow lines.

Save

Attention, it's not saved by a red box at the window bottom line! Only by the green "saved" message, you can continue.

excustomers.json:

{ "settingsadditional":["exnotes"], "backend":{ "foreigndeletions":[ { "table":"exnotes", "childkey":"accountID" } ] } }

settingsadditional

Replace "exnotes" with your notes datadefinition.

backend

Replace in table exnotes with:

• your exnotes table name

If a customer is deleted, the exnotes are also deleted.

Insert this lines in your excustomer data definition.

Save

Attention, it's not saved by a red box at the window bottom line! Only by the green "saved" message, you can continue.

Extend excustomer_head_end.js:

if(!settingsexcustomer3.masterdata.cbcatLoad)settingsexcustomer3.masterdata.cbcatLoad=[]; settingsexcustomer3.masterdata.cbcatLoad.push(function(options){ let dat=options.dat; // hyperlinks are following setDisabled(dat,options.el_rec_record); }); if(page=='detail'){ if(!settingsexcustomer3.masterdata.cbcatAfterLoadAll)settingsexcustomer3.masterdata.cbcatAfterLoadAll=[]; settingsexcustomer3.masterdata.cbcatAfterLoadAll.push(function(options){ var el_list=options.el_list; var data=options.data; if(userID>0){ // button Choose $(el_list).on("click",".js_mybtn",function(e){ var el_rec_record=$(e.target).parents('.js_rec_record')[0]; var index=Number(el_rec_record.dataset.rec_index); var dat=data[index]; console.log(dat); let url=GLOBALS_hostpath+settingsexnotes.masterdata.url_save; let dat_notes={'accountID':dat.accountID}; postData(url,dat_notes).then((obj) => { console.log(obj); if(obj.bok){ dat.notesID=obj.dat.ID; dat.note=1; $(el_rec_record).find('.js_note').show(); setDisabled(dat,el_rec_record); }else{ k8.message(obj.error,'alert'); } }); }); // button Release $(el_list).on("click",".js_release",function(e){ var el_rec_record=$(e.target).parents('.js_rec_record')[0]; var index=Number(el_rec_record.dataset.rec_index); var dat=data[index]; console.log(dat); let root=GLOBALS_hostpath; let url=root+settingsexnotes.masterdata.url_del; let dat_notes={'keyvalue':dat.notesID}; postData(url,dat_notes).then((obj) => { console.log(obj); if(obj.bok){ dat.notesID=0; dat.note=0; $(el_rec_record).find('.js_note').hide(); setDisabled(dat,el_rec_record); }else{ k8.message(obj.error,'alert'); } }); }); } }); } function setDisabled(dat,el_rec_record){ if(userID>0){ let el_mybtn=el_rec_record.querySelector('.js_mybtn'); let el_release=el_rec_record.querySelector('.js_release'); if(el_mybtn)el_mybtn.disabled=Number(dat.notesID)>0; if(el_release)el_release.disabled=Number(dat.notesID)==0; } }

please do:

• insert this code at the top of the file
• remove the block "detail button" at the end of the file

Attention: replace "settingsexcustomer3" with your variable, example:

• settingsexcustomer

Save

Attention, it's not saved by a red box at the window bottom line! Only by the green "saved" message, you can continue.

Explanation

Only when a user is logged in (userID>0) one of the buttons Choose and Release can be clicked.

The function setDisabled(..) checks, if notesID is 0 or >0, and disables or enables the button. An eventlistener for click is added to each button.

The variable for the favorit object is:

• settingsexnotes: exchange it with your name:
  • settings<your datadefID>

Choose

• with postData(..) the dat_notes.accountID is saved to the server
• "obj" is send back:
  • by success (obj.bok=true) the current data of the account record is changed to:
    • dat.notesID=obj.dat.ID;
    • dat.note=1;
    • ..show(): shows the badge

Release

• with postData(..) the notesID is send with the parameter name 'keyvalue' to the server for delition
• "obj" is send back:
  • by success (obj.bok=true) the current data of the account record is changed to:
    • dat.notesID=0;
    • dat.note=0;
    • ..hide(): shows the badge