Tell me how to correctly add values ​to display in the table - salesforce

I have such an object
the "from" field and the "to" field are responsible for the date (shows the value for the selected date period).
the currency field shows the default currency from which other currencies are converted.
field enter currency - (my test field which is not needed yet).
field value is the value of my currency.
my currencies are stored in Manage Currencies
I want to use as many currencies as possible
but I don't know how to do it right because if I continue to add currencies through Manage Currencies, I will have to correct the code as well, because my table filling looks like this:
<template if:true={data}>
<lightning-datatable
key-field="id"
hide-checkbox-column
data={data}
columns={columns}>
</lightning-datatable>
</template>
____________________________________________________________
#track columns = [
{ label: 'Date', fieldName: 'key'},
{ label: 'USD', fieldName: 'USD', type: 'currency' },
{ label: 'CAD', fieldName: 'CAD', type: 'currency' },
{ label: 'EUR', fieldName: 'EUR', type: 'currency' },
{ label: 'GBP', fieldName: 'GBP', type: 'currency' },
{ label: 'KZT', fieldName: 'KZT', type: 'currency' },
{ label: 'BYN', fieldName: 'BYN', type: 'currency' },
];
getExchangeRates({baseCurrency : this.defaultCurrency, dateFrom : this.dateFrom, dateTo : this.dateTo, value : this.defaultValueSelectedCurrency})
.then(resultJSON => {
let result = JSON.parse(resultJSON);
let recordsByDates = result.rates;
console.log('Test result 2');
console.log(recordsByDates);
this.data = [];
for (var key in recordsByDates) {
let record = {
key: key,
date : recordsByDates[key].date,
USD : recordsByDates[key].USD,
CAD : recordsByDates[key].CAD,
EUR : recordsByDates[key].EUR,
GBP : recordsByDates[key].GBP,
BYN : recordsByDates[key].BYN,
KZT : recordsByDates[key].KZT
}
this.data.push(record);
}
console.log(record);
console.log(this.data);
})
.catch(error => {
this.error = error;
console.log(error);
});
and it will look terrible:

Related

Is there a way to remove currency prefix from material-table react?

Is there any way to remove the currency prefix from react's material-table since I am using different currencies on the table, it becomes confusing to stick to just one prefix as I have a different column to display the type of currency
Any help would be appreciated, thanks
Here is a chunk of the source code for creating the table, I am getting the data from an API endpoint
<MaterialTable style={{marginLeft:'10px', marginRight:'10px'}}
title="INVOICES"
columns={[
{ title: 'Seller Name', field: 'seller' },
{ title: 'Buyer Name', field: 'buyer' },
{ title: 'Invoice No', field: 'invoice_number' },
{ title: 'Currency', field: 'currency' },
{ title: 'Amount', field: 'invoice_amount', type:'currency', currencySetting:{ currencyCode:'USD', minimumFractionDigits:0, maximumFractionDigits:2}},
{ title: 'Invoice Date', field: 'invoice_date' },
{ title: 'Eligible Date', field: 'date_eligible' },
{ title: 'Due Date', field: 'due_date' },
{ title: 'Status', field: 'status' },
]}
data={this.state.stats}
I'm not using material-table, but I played a little with it. This is the the source code of material-table where the error has created:
Intl.NumberFormat(currencySetting.locale !== undefined ? currencySetting.locale : 'en-US', {
style: 'currency',
currency: currencySetting.currencyCode !== undefined ? currencySetting.currencyCode : 'USD',
minimumFractionDigits: currencySetting.minimumFractionDigits !== undefined ? currencySetting.minimumFractionDigits : 2,
maximumFractionDigits: currencySetting.maximumFractionDigits !== undefined ? currencySetting.maximumFractionDigits : 2
}).format(value !== undefined ? value : 0);
It uses the Intl.NumberFormat standard Javascript function to format the currency. This function supports 47 country.
You can play with this function here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
For example for Hungary (my country) I can call it with:
new Intl.NumberFormat('hu', { style: 'currency', currency: 'huf' }).format(number);
So I should change the columnDefinition to:
{ title: 'Amount', field: 'invoice_amount', type:'currency', currencySetting:{ locale: 'hu',currencyCode:'huf', minimumFractionDigits:0, maximumFractionDigits:2}},
Please note, that I added a locale: 'hu' and I changed the currencyCode to 'huf'.
If your country is not in the supported countries. Try something else with similar formatting.

Get Fetched Data to table data in material ui react

I Have Fetched Some Data from a url via axios .I want to display those data to material ui table data in React. Here, 'patient' is the array where fetched data stored.
Code:
const [patient, setPatient] = React.useState([])
const [state, setState] = React.useState({
columns: [
{ title: 'Name', field: 'name' },
{ title: 'Gender', field: 'gender' },
{ title: 'Age', field: 'age', type : 'numeric' },
{ title: 'Birth Year', field: 'birthYear', type : 'numeric' },
{ title: 'Phone Number', field: 'phoneNumber', type : 'tele'
},
],
data: [
],
});
React.useEffect(()=>{
axios.get('http://127.0.0.1:8000/patient/AppModel/')
.then(res =>{
setPatient(res.data)
})
.catch(err=>{
console.log(err)
})
},[])
return (
<MaterialTable
title="Patient List"
columns={state.columns}
data={state.data}
/>
})}
But actually i don't how to get an array data to an array of objects.

ant design table with dynamic children columns

I'm using ant's table and trying to setup dynamic columns.
What I need is a table that shows a list of users with their performance for each of the classes as in the example below.
Details: I have a grouped column Performance that can have different sub-columns (current example shows columns science and physics). I'm calling renderContent() which sets up an object that has property children. I found this "solution" from ant's example here. The problem is that ant's example outputs children prop type string, while my function outputs prop type array. Which results in the error.
Here is a link to sandbox:
https://codesandbox.io/embed/ecstatic-cookies-4nvci?fontsize=14
Note: if you uncomment children array in columns [line 46-59], you will see what my expected result should be.
The render method shouldn't return the object with children array. To use the render method, you would have to return a valid React component (or simply HTML tag ---like span).
However in your case, I prefer we extract subjects before passing it into the table and then generate children array dynamically. Something like below:
const renderContent = (value, row, index) => {
return setupPerformance(value)
};
const setupPerformance = performance => {
return performance.map(p => {
const { id, title, percentage } = p;
return <span>{percentage}%</span>
});
};
const data = [
{
key: 0,
firstName: "John",
lastName: "Smith",
performance: [
{
id: 1,
title: "science",
percentage: 75
},
{
id: 2,
title: "physics",
percentage: 36
}
]
},
{
key: 1,
firstName: "Ann",
lastName: "Smith",
performance: [
{
id: 1,
title: "science",
percentage: 68,
timeSpent: 50,
completionDate: "2019-02-07"
},
{
id: 2,
title: "physics",
percentage: 100
}
]
}
];
let subjects = data[0].performance
const columns = [
{
title: "Full Name",
children: [
{
title: "firstName",
dataIndex: "firstName",
key: "firstName"
},
{
title: "lastName",
dataIndex: "lastName",
key: "lastName"
}
]
},
{
title: "Performance",
dataIndex: "performance",
children:
subjects.map(e => {
return {
title: e.title,
dataIndex: "performance["+(e.id-1)+"].percentage",
key: "key-"+e.id,
render: value => <span>{value}%</span>
}
})
}
];
Because of the solution in answer from Mobeen does not work anymore, I have tried to solve this.
I have extended the render method for the children columns of performance column:
...
{
title: "Performance",
dataIndex: "performance",
children: subjects.map((assessment) => {
const { title, id } = assessment;
return {
title,
dataIndex: "performance",
key: id,
render: (values) =>
values.map((value, index) => {
let ret;
if (index === id - 1) ret = values[index].percentage + "%";
return ret;
})
};
})
}
...
It returns only the percentage value of the subject with the corresponding id.
It is not very clean, but it works.
Check the solution in sandbox: https://codesandbox.io/s/prod-lake-7n6zgj

How do I return specific field of nested object array in angular having fields value?

I have an nested object array like this.
here is my array:
public collections: ICollections[] = [
{
collectionName: 'Brands',
collectionFields: [
{
columnTitle : 'brandTitle',
Type : dtEnum.string,
control: {
controlTitle: controlsEnum.input,
controlType: controlsEnum.input,
controlProperties:
{
placeholder: 'Enter brand title here ...',
type: 'text',
autocomplete: false,
}
},
columnWidth: 200
}
],
collectionFieldValidation: [{name: 'test'}],
hasPaginator: true,
stickyColumn: 0,
stickyHeader: true
},
{
columnTitle : 'brandURL',
Type : dtEnum.string,
control: {
controlTitle: controlsEnum.input,
controlType: controlsEnum.input,
controlProperties: {
placeHolder: 'Enter Brand URL',
type: 'text',
autocomplete: false,
}
},
columnWidth: 300
},
{
columnTitle : 'brandDescription',
Type : dtEnum.string,
control: {
controlTitle: controlsEnum.textarea,
controlType: controlsEnum.textarea,
controlProperties: {
placeHolder: 'Enter Brand Description',
type: 'text',
autocomplete: false,
}
},
columnWidth: 300
}
];
I want to reach to placeholder field. how do I find it by having only collectionName field with Brands value and columnTitle field with brandURL value ?
this question asked before just with collectionName field value but I find out that my filter should include more than one field.
first of all, find the collection that corresponds to "Brands" or any other thing:
let result = collections.find(p => p.collectionName === "Brands");
then get the placeholder field:
change your_index to 0 or your specific index
if (result) {
let placeholder = result.collectionFields[your_index].control.controlProperties.placeholder;
}
Here is my solution :
placeholder_finder(collectionSearchKey: string, fieldSearchKey: string): string {
let field: any;
let placeholder: string;
const obj = this.genInfo.collections.filter(
x => x.collectionName === collectionSearchKey
);
obj.forEach(data => {
field = data.collectionFields.filter(
x => x.columnTitle === fieldSearchKey
);
});
field.forEach(element => {
placeholder = element.control.controlProperties.placeHolder;
});
return placeholder;
}

how to make API calls in angularjs

I am new to this platform, I have a select option box and a another select box then the number input field. if the user select fieldName by selection and operator by selection and enter the number then the submit button to get the data from the server.
var app = angular.module("app", []);
app.controller('OutletController', function($scope, $http) {
$scope.minVal = "";
$scope.GetFullDetails = function(outlets) {
$scope.outlets = [];
$scope.err = [];
$http.get("http://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatus?" + $scope.minVal).
success(function(data) {
$scope.outlets = data;
}).
error(function(data) {
$scope.err = data;
});
}
});
$scope.selectField = [{
displayname: "Field Name",
valueType: "",
fieldname: ""
}, {
displayname: "Keyword",
valueType: "text",
fieldname: "keyword"
}, {
displayname: "Offer Status",
valueType: "text",
fieldname: "offerStatus"
}, {
displayname: "Start Date",
valueType: "date",
fieldname: "startDate"
}, {
displayname: "End Date",
valueType: "date",
fieldname: "endDate"
}, {
displayname: "Total Run Span",
valueType: "number",
fieldname: "totalRunSpan"
}, {
displayname: "Foot Fall",
valueType: "number",
fieldname: "footfall"
}];
$scope.selfield = $scope.selectField["0"];
//<------------------------------ Operator section ------------------------------------->//
$scope.Operators = [{
displayname: "Operator",
fieldname: ""
}, {
displayname: "Greater Than",
fieldname: "greaterThan"
}, {
displayname: "Between",
fieldname: "between"
}];
$scope.optrfield = $scope.Operators["0"];
<select name="Select Field" ng-model="selfield"
ng-options="fld as fld.displayname for fld in selectField"
ng-change="selectfld()">
</select>
<select name="Operators" ng-model="optrfield"
ng-options="opr as opr.displayname for opr in Operators"
ng-change="selectOptr()" ng-show="operat">
</select>
<input type="number" name="min number" ng-model="minVal"
placeholder="Enter Value" ng-show="minN">
Example: if the user selectfield = footfall and select the operator = greaterthan and input value of 50. after submit the data should bring from the server.
Thanks in Advance!!!
I will start with assumption on what do you want to do, since it's not so clear from your post.
You basically have an endpoint at http://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatus and you want to pass it parameters like minVal, selfield and optrfield?
If this is the question, then there are several possibilities.
The easiest thing you can do is to just values to your URL string.
$http.get("http://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatus?minVal=" + $scope.minVal + "&optrfield=" + $scope.optrfield + "&selfield="+ $scope.selfield)
or more cleanly:
$http.get(`http://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatus?minVal=${$scope.minVal}&optrfield=${$scope.optrfield}&selfield=${$scope.selfield}`)
Please note that minVal, optrfield and selfield that are inside the string (not your controller variables) need to match your method parameters in your server code.
Also, you can always do it like this:
var request = {
url: 'http://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatus',
method: 'GET',
data: {
minVal: $scope.minVal,
optrfield: $scope.optrfield,
selfield: $scope.selfield
}
}
$http(request)
//rest of your code
For more information, please check out this link.

Resources