Hi Dharani Dharan Eswaran,
Thank you for your explation but I'm still need more explation if it's posable
I already have added a new field only design by modifided maximo-supervisor-details.html
but I'm still need to know how to display data in my field and how to update data there
I have tried a lot to modifieded in maximo-supervisor-details.js
but without any results
my new field is "test_desc"
// line 90
// I have added name of my new field "test_desc"
attributeList: {
type: String,
value: 'workorderid,origrecordid,wonum,worktype,description,description_longdescription,test_desc,status,status_maxvalue, wopriority, estdur, actstart,actfinish,schedstart,schedfinish,statusdate,reportdate,targstartdate,targcompdate, assetnum,asset.description,asset._imagelibref,location,asset.isrunning, location.description,location.location,location._imagelibref,parent.wonum,parent.description, glaccount,siteid,onbehalfof._imagelibref,onbehalfof.displayname, uxlead._imagelibref,uxlead.displayname,ownerperson._imagelibref, ownerperson.displayname,uxsupervisor.displayname, uxsupervisor._imagelibref, workorderownergroup.description,site.description,rel.labtranstimerstatus{*},origrecordclass,origticket.description,origwo.description,failure.description,wo_worktype.wtypedesc,reportedby.displayname,reportedby._imagelibref,synonymdomain.description,reportedby.primarysms,reportedby.primaryemail,reportedby.primaryphone,onbehalfof.primarysms,onbehalfof.primaryemail,onbehalfof.primaryphone,uxlead.primarysms,uxlead.primaryemail,uxlead.primaryphone,ownerperson.primarysms,ownerperson.primaryemail,ownerperson.primaryphone,uxsupervisor.primarysms,uxsupervisor.primaryemail,uxsupervisor.primaryphone,relatedreckey,relatetype,jpnum,jobplan.description,pluscjprevnum,problemcode,problem.description,parent.status,failurecode,failure.description_longdescription,remarkdesc,worktype.promptfail--worktypeprompt,rel.moddowntimehist{*},classstructure.description--class_description,maxvar.labtrnallowanycrft,workorderownergroup.persongroup,workorderownergroup._imagelibref,istask,taskid,serviceaddress.saddresscode,serviceaddress.description,serviceaddress.formattedaddress,location.saddresscode,location.serviceaddress.addresscode,location.serviceaddress.formattedaddress,location.serviceaddress.description,inspformnum,inspectionformall.name--inspformname,inspectionresult.resultnum--inspresult,woactivity{rel.inspectionresult{resultnum}},classstructureid,classstructure.classificationid--classificationid,classstructure.hierarchypath--classsturchierarchypath,amcrew.amcrew,amcrew.description,serviceaddress.referencepoint,serviceaddress.directions,serviceaddress.directions_longdescription'
},
here I have added my field like others in the switch case
// line 1000
_applyEdits: function(e){
if(this.createWO){
this._setCachedValue(e);
return;
}
switch(e.detail.dataset.scopeId){
case 'test_desc':
var dataToUpdate = {'test_desc': e.target.value};
this._updateWO(dataToUpdate, this.collection);
break;
And I have modified here
// line 1803
/**
* prepares the detail page to display a new record
*/
showDetail: function(workOrder, collection, readOnly, sourcePage, panelName, displayTab, newWO){
this.panelName = panelName;
if(sourcePage === 'create'){
var self = this;
$j(this.$.contentSelector).attr('add-class','disableLink');
this.cachedRecord ={};
this.createWO = newWO;
this._disabledPageNavigation(true);
this.plandataexists = false;
this.actionName = '';
this.$.wopriority.newTile = this.createWO;
this.record = workOrder;
this.cachedRecord['uxsupervisor'] = this.record.reportedby;
this.cachedRecord['siteid'] = this.record.siteid;
if(this.record.wopriority === undefined){
this.$.wopriority.newTile = this.createWO;
this.$.wopriority.emptyRecord = true;
}
this.refreshTiles();
this.dataLoaded = false;
if(self.$.relatedRecordsWOTable.collection.totalCount>0){
this.$.relatedRecordsWOCollection.refreshRecords().then(function(response){
self.$.relatedRecordsWOTable.$.wrapperNoData.style.display='block';
$j(self.$.relatedRecordsWOTable.$.nodata).removeClass('hideElement');
$j(self.$.relatedRecordsWOTable.$.nolabel).removeClass('hideElement');
self.$.relatedRecordsWOTable.collection.collectionData=[];
self.$.relatedRecordsWOTable.$.table.$.rowRepeat.items=[];
self.$.relatedRecordsWOTable.collection.totalCount=0
self.dataLoaded = true;
});
}
}else{
this.assetFlag = false;
this.locationFlag = false;
this.createWO = false;
$j(this.$.contentSelector).removeAttr('add-class');
this._refreshRecord();
}
this.panelName = panelName;
this.collection = collection;
this.recordLight = workOrder;
this.readOnly = readOnly;
this.sourcePage = sourcePage;
this.newWO = newWO;
this.$.assetimg.newTile = newWO;
this.$.statusTile.newTile = newWO;
this.$.wopriority.newTile = newWO;
this.$.locationimg.newTile = newWO;
this.$.workfailure.newTile = newWO;
this.$.workproblem.newTile = newWO;
this.$.worktype.newTile = newWO;
// I have added my field here
this.$.test_desc.newTile = newWO;
this.$.parentwo.newTile = newWO;
this.$.originRecd.newTile = newWO;
this.$.sitedesc.newTile = newWO;
this.$.schedstart.newTile = newWO;
this.$.schedfinish.newTile = newWO;
this.$.targstartdate.newTile = newWO;
this.$.targcompdate.newTile = newWO;
this.$.durationTile.newTile = newWO;
this.$.actstart.newTile = newWO;
this.$.actfinish.newTile = newWO;
this.$.reportbyimg.newTile = newWO;
this.$.reportdate.newTile = newWO;
this.$.onbehalfof.newTile = newWO;
this.$.leadimg.newTile = newWO;
this.$.ownerimg.newTile = newWO;
this.$.ownergrp.newTile = newWO;
this.$.superimg.newTile = newWO;
this.$.jobplan.newTile = newWO;
this.$.amcrew.newTile = newWO;
// add required details to session Cache
if(!this.createWO){
sessionStorage.setItem('WORecordLight', JSON.stringify(this.recordLight));
sessionStorage.setItem('WOSourcePage', this.sourcePage);
sessionStorage.setItem('WOCollectionId', this.collection.id);
sessionStorage.setItem('WOCollectionQueryWhere', JSON.stringify(this.collection.queryWhere));
}
if(newWO){
this.assetFlag = false;
this.locationFlag = false;
}
var sectionId = 'section_details';
this.reportTimeAction = false;
if(!displayTab || displayTab === 'details'){
this.resetContentSelectorDefault();
this._loadMultiAssetLocData();
if(this.isAuthorized('MXAPIWODETAIL:SAVE')) {
this.woButtonActionsVisibility = false;
}else{
this.woButtonActionsVisibility = true;
}
}else if( displayTab === 'comments'){
sectionId = 'section_comments';
this.resetContentSelectorComment();
}
else if(displayTab === 'reportTime' || displayTab === 'approveTime'){
sectionId = 'section_reportedwork';
this.reportTimeAction = true;
var currentIndex = $j(this.$['maximo_workorder_reportedwork']).index();
if(displayTab === 'reportTime'){
var self = this;
self.async(function(){
$j(self).find('#supervisorreportedwork')[0].fire('add-reportedwork-time-card');
},100);
}
this.resetContentSelectorReportedWork(currentIndex);
}
this._showSubTab(sectionId);
if(this.createWO){
$M.toggleWait(false);
}
this.fire('workscape-design-views',{'hasDesignMode':false});
var self = this;
this._setRequiredTile().then(function(records){
if(newWO){
self._disableSaveButton();
}
});
},
Please help me if it's possible
Thank you
------------------------------
Hussin Mahmoud
------------------------------
Original Message:
Sent: Sat December 11, 2021 10:21 AM
From: Dharani Dharan Eswaran
Subject: Work Center - Customize Service Requests
Hi
My Knowledge on this.
Technology Stack:
Maximo Work Center is built on top of Google Polymer, Google Web Components and Latest Web Technology stack to bring the Rich and Responsive UI.
IBM has built their own Custom Elements for Maximo Work Centers which are called as Maximo Cards.
Work Center Apps communicates with Maximo using REST API.
So, to customize Maximo Work Center Apps we need to be familiar with HTML5, JavaScript, CSS, Polymer, Web Components and Maximo REST API.
Basic Customization (Configuring Work Center):
IBM provides inbuilt Design Mode starting from Maximo 7.6.1.1 for Basic Level of Customization.
Enabling Design Mode in Work Center Apps is configurable using Security Groups.
Advanced Customization:
IBM allows modifying the HTML, Javascript files. For e.g. if any customization is to be carried out for work supervisor work center then the changes needs to be made in the HTML, JavaScript files located in the following path: {MaximoInstallLocation}/SMP/maximo/applications/maximo-x/script/maximocards/workorder/supervisor/common/maximo-supervisor-details/
- maximo-supervisor-details.html – Contains the code for UI Elements such as Tiles, Badges and Buttons.
- maximo-supervisor-details.js – Contains the code for Events such as Save, Apply Update for Each Field etc…
- maximo-supervisor-details -css.html – Contains the code for UI Styling of this screen.
After saving changes to the files, we must build and deploy maximo-x.ear to our application server to see the changes reflecting in Work Center application.
#AssetandFacilitiesManagement
#Maximo