SAPUI5 Color text from a table / list cell - sapui5

I want to change the color of the table cell, but I find it hard to transform the code to XMLView from JSView. Can you guys give me a hand ?
What I've managed so far, is to add the text of the color, but what I want is to color the text itself (or the background)
Here is the code:
<ObjectIdentifier
title="{Invoices>BillValue}"
text = "{parts : [ 'Invoices>InvoiceRest' ],
formatter: 'Invoices.Formatter.BillColor'
}"/>
And in the "formatter" (I don't know why it doesn't want to format the text bellow :( ):
jQuery.sap.declare("Invoices.Formatter");
Invoices.Formatter = {
BillColor : function (fValue1) {
try {
if (Number(fValue1) > 0) {
return "red";
} else {
return "green";
}
} catch (err) {
return "None";
} } };
Thanks

var iDtemplate = new sap.m.ColumnListItem("idTemplate",{
type: "Navigation",
visible: true,
selected: true,
cells:[
new sap.m.ObjectStatus({
text:"{SlNo}",
}).bindProperty("state", "number", function(value) {
return getStatusColor(value);
}),
new sap.m.ObjectStatus({
text:"{Name}",
}).bindProperty("state", "number", function(value) {
return getStatusColor(value);
}),
],
pressListMethod: function(event){
var bindingContext = event.getSource().getBindingContext();
}
});
function getStatusColor(status) {
if (status === '') {
return "Error";
}
else {
return "Success";
}
}
Based on the number field we are giving colors to columns Slno and Name.

Related

How can I print the table with the checkbox checked using react-data-grid?

When printing a table using react-data-grid
I am trying to make the background color of a specific row be blue and the checkbox to be checked.
code:
if (res) {
// alert("hi")
if (searchModalInit.excelColumnType === "toolProduct") {
setSearchList([...SearchResultSort(!column.noSelect ? [null, ...res] : res, searchModalInit.excelColumnType)])
setPageInfo({ page: res.page, total: res.totalPages });
Notiflix.Loading.remove()
} else
if (res.page !== 1) {
console.log("hihi");
setSearchList([...searchList, ...SearchResultSort(!column.noSelect ? [{ noneSelected: true }, ...custom_info_list] : custom_info_list, searchModalInit.excelColumnType)])
setPageInfo({ page: res.page, total: res.totalPages });
Notiflix.Loading.remove()
} else {
// console.log(custom_info_list)
// console.log("custom_info_list : ", custom_info_list);
console.log("selector.product_ids_for_selected_rows : ", selector.product_ids_for_selected_rows);
console.log("custom_info_list : ", custom_info_list);
let tmp: Set<any> = selectList
const new_rows = custom_info_list.map((row, index) => {
if (selector.product_ids_for_selected_rows.includes(row.product_id)) {
// alert("실행이 되나? : " + row.product_id)
tmp.add(row.product_id)
tmp.add(index)
return {
...row,
border: true
}
} else {
return {
...row
}
}
})
console.log("new_rows ::::", new_rows);
setSearchList([...SearchResultSort(!column.noSelect ? [{ id: null, noneSelected: false }, ...new_rows] : new_rows, searchModalInit.excelColumnType)])
Notiflix.Loading.remove()
}
}
color has been set
checkbox check doesn't work
let tmp: Set<any> = selectList
const new_rows = custom_info_list.map((row, index) => {
if (selector.product_ids_for_selected_rows.includes(row.product_id)) {
// alert("Is it running? : " + row.product_id)
tmp.add(row.product_id)
tmp.add(index)
If you know a way to make the checkbox of each row in the table be checked, please let me know. thank you
Reference:
https://github.com/adazzle/react-data-grid
test:

Toggle Select All not working for grid.js

I have a grid js defined as follows. I have select all check box on which I want to select/deselect all the rows. I am able to perform select all but deselect all does not work. Can anyone please help. Thanks.
const grid = new gridjs.Grid({
columns: [
{
id: "selectId", name: "Select",
plugin: {
component: gridjs.plugins.selection.RowSelection,
props: {id: (row) => row.cell(1).data}
}
},
{ id: "columnName", name: "Column Name" },
{ id: "dataType", name: "Data Type"}
],
data: [],
});
function init(){
grid.render("#data-grid);
}
function loadGrid(){
$.get("/someURL",function(response) {
if(response.success){
fileSchemaGrid.updateConfig({
data: response.data
}).forceRender();
}
});
}
function toggle(){
if($("#checkbox-select-all-rows").is(":checked")){
//This block works
fileSchemaGrid.config.columns[0].data = true;
fileSchemaGrid.forceRender();
}else{
//*** This block does not work***
fileSchemaGrid.config.columns[0].data = false
fileSchemaGrid.forceRender();
}
}
I had the same issue and found that this works - but its a bit hacky.
function toggle(){
if($("#checkbox-select-all-rows").is(":checked")){
//This block works
fileSchemaGrid.config.columns[0].data = true;
fileSchemaGrid.forceRender();
}else{
//*** This block should now work***
fileSchemaGrid.config.columns[0].data = null;
fileSchemaGrid.config.plugin.get('selectId').props.store.state.rowIds = [];
fileSchemaGrid.forceRender();
}
}

How to avoid unexpected side effect in computed properties - VueJS

I am trying to prefill a form with data from a vuex store.In the code provided is the expected result, I need but I know that this is not the way to do it. I am fairly new to Vue/Vuex. The inputs use a v-model thats why i cant use :value="formInformation.parentGroup" to prefill.
data() {
return {
groupName: { text: '', state: null },
parentName: { text: '', state: null },
};
},
computed: {
formInformation() {
const groups = this.$store.getters.groups;
const activeForm = this.$store.getters.activeForm;
if (activeForm.groupIndex) {
const formInfo = groups[0][activeForm.groupIndex][activeForm.formIndex]
this.groupName.text = formInfo.name // Is there a way to not use this unexpected side effect ?
return formInfo;
} else {
return 'No Form Selected';
}
},
},
I searched for an answere for so long now that i just needed to ask it. Maybe i am just googling for something wrong, but maybe someone here can help me.
You are doing all right, just a little refactoring and separation is needed - separate all the logic to computed properties (you can also use mapGetters):
mounted() {
if (this.formInformation) {
this.$set(this.groupName.text, this.formInformation.name);
}
},
computed: {
groups() {
return this.$store.getters.groups;
},
activeForm() {
return this.$store.getters.activeForm;
},
formInformation() {
if (this.activeForm.groupIndex) {
return this.groups[0][this.activeForm.groupIndex][
this.activeForm.formIndex
];
}
}
}
You could either make groupName a computed property:
computed: {
groupName() {
let groupName = { text: '', state: null };
if (formInformation.name) {
return groupName.text = formInfo.name;
}
return groupName;
}
Or you could set a watcher on formInformation:
watch: {
formInformation: function (newFormInformation, oldFormInformation) {
this.groupName.text = formInfo.name;
}
},
Avoid mutating data property in computed.
Computed are meant to do some operation (eg. reduce, filter etc) on data properties & simply return the result.
Instead, you can try this:
computed: {
formInformation() {
const groups = this.$store.getters.groups;
const activeForm = this.$store.getters.activeForm;
if (activeForm.groupIndex) {
const formInfo = groups[0][activeForm.groupIndex][activeForm.formIndex]
// this.groupName.text = formInfo.name // <-- [1] simply, remove this
return formInfo;
} else {
return 'No Form Selected';
}
}
},
// [2] add this, so on change `formInformation` the handler will get called
watch: {
formInformation: {
handler (old_value, new_value) {
if (new_value !== 'No Form Selected') { // [3] to check if some form is selected
this.groupName.text = new_value.name // [4] update the data property with the form info
},
deep: true, // [5] in case your object is deeply nested
}
}
}

How to stub view model in ui5?

I'm new to qunit + sinon.js, I want to write a unit test for function onMultiSelectPress, so I need to mock:
this.myController._oList
this.myController.getResourceBundle()
this.myController.getModel("masterView")
Right?
I'm stuck at get a stub for getModel("masterView"), any suggestion?
onInit : function () {
var oList = this.byId("list"),
oViewModel = this._createViewModel();
this._oList = oList;
this.setModel(oViewModel, "masterView");
},
_createViewModel : function() {
return new JSONModel({
isFilterBarVisible: false,
filterBarLabel: "",
delay: 0,
title: this.getResourceBundle().getText("masterTitleCount", [0]),
noDataText: this.getResourceBundle().getText("masterListNoDataText"),
sortBy: "Name",
groupBy: "None",
listMode: "SingleSelectMaster",
showDeleteButton: false
});
},
getModel : function (sName) {
return this.getView().getModel(sName);
},
onMultiSelectPress : function () {
var oMasterViewModel = this.getModel("masterView");
switch(this._oList.getMode()) {
case "MultiSelect":
oMasterViewModel.setProperty("/listMode", "SingleSelectMaster");
oMasterViewModel.setProperty("/showDeleteButton", false);
break;
case "SingleSelectMaster":
oMasterViewModel.setProperty("/listMode", "MultiSelect");
oMasterViewModel.setProperty("/showDeleteButton", true);
break;
}
},
Add a oViewStub in beforeEach, and set an empty JSON model using for testing.
QUnit.module("MasterController", {
beforeEach: function() {
this.oMasterController = new MasterController();
this.models = {};
var oViewStub = {
setModel: function(model, name) {
this.models[name] = model;
}.bind(this),
getModel: function(name) {
return this.models[name];
}.bind(this)
};
sinon.stub(Controller.prototype, "getView").returns(oViewStub);
},
afterEach: function() {
this.oMasterController.destroy();
jQuery.each(this.models, function(i, model) {
model.destroy();
});
Controller.prototype.getView.restore();
}
});
QUnit.test("test onMultiSelectPress() ", function(assert) {
var oMasterController = this.oMasterController;
var oModel = new JSONModel();
oMasterController.setModel(oModel, "masterView");
var oMasterViewModel = oMasterController.getModel("masterView");
oMasterController._oList = new sap.m.List();
sinon.stub(oMasterController._oList, "getMode").returns("MultiSelect");
oMasterController.onMultiSelectPress();
assert.strictEqual(oMasterViewModel.getProperty("/listMode"), "SingleSelectMaster", "Did change list mode to SingleSelectMaster");
assert.strictEqual(oMasterViewModel.getProperty("/showDeleteButton"), false, "Did hide the delete button");
oMasterController._oList.getMode.restore();
sinon.stub(oMasterController._oList, "getMode").returns("SingleSelectMaster");
oMasterController.onMultiSelectPress();
assert.strictEqual(oMasterViewModel.getProperty("/listMode"), "MultiSelect", "Did change list mode to MultiSelect");
assert.strictEqual(oMasterViewModel.getProperty("/showDeleteButton"), true, "Did show the delete button");
oMasterController._oList.destroy();
});

unique form field validation in extjs4

Is there a cleaner way to define unique form field in extjs. Below is a sample code that is checking on client UID on client creation/edition. This code is working but has some bugs - for example on client creation if you enter a value that is already present in DB validator returns true until you unfocus the field.
Ext.define('AM.view.client.UniqueField', {
extend: 'Ext.form.field.Text',
alias : 'widget.uniquefield',
vtype: 'UniqueUid',
initComponent: function() {
Ext.apply(Ext.form.field.VTypes, {
UniqueUidMask : /[0-9]/i,
UniqueUid : function(val,field) {
if (val.length < 9) {
Ext.apply(Ext.form.field.VTypes, {
UniqueUidText: 'Company ID is too small'
});
return false;
} else {
var paste=/^[0-9_]+$/;
if (!paste.test(val)) {
Ext.apply(Ext.form.field.VTypes, {
UniqueUidText: 'Ivalid characters'
});
return false;
} else {
var mask = new Ext.LoadMask(field.up('form'),{msg:'Please wait checking....'});
mask.show();
var test= 0;
var store = Ext.create('AM.store.Clients');
store.load({params:{'uid':val, 'id': Ext.getCmp('client_id').getValue()}});
store.on('load', function(test) {
mask.hide();
if(parseInt(store.getTotalCount())==0){
this.uniqueStore(true);
}else{
Ext.apply(Ext.form.field.VTypes, {
UniqueUidText: 'Company ID is already present'
});
this.uniqueStore(false);
}
},this)
return true;
}
}}
},this);
this.callParent(arguments);
},
uniqueStore: function(is_error){
Ext.apply(Ext.form.field.VTypes, {
UniqueUidMask : /[0-9]/i,
UniqueUid : function(val,field) {
if (val.length < 9) {
Ext.apply(Ext.form.field.VTypes, {
UniqueUidText: 'Company ID is too small'
});
return false;
} else {
var paste=/^[0-9_]+$/;
if (!paste.test(val)) {
Ext.apply(Ext.form.field.VTypes, {
UniqueUidText: 'Ivalid characters'
});
return false;
} else {
var mask = new Ext.LoadMask(field.up('form'),{msg:'Please wait checking....'});
mask.show();
var store = Ext.create('AM.store.Clients');
store.load({params:{'uid':val, 'id': Ext.getCmp('client_id').getValue()}});
store.on('load', function(test) {
mask.hide();
if(parseInt(store.getTotalCount())==0){
this.uniqueStore(true);
}else{
this.uniqueStore(false);
}
},this)
return is_error;
}
}}
},this);
}
});
How about using server side validation?
I answered to similar issue here: extjs4 rails 3 model validation for uniqueness
Obviously you can change it to use "ajax" instead of "rest" proxy.