For my work in vaadin 7, I need to connect a Slider from MaterialUI.
The vaadin component.Slider is not suitable, because I need to set the color of the slider, labels from Java code, change the design styles and the color of the slider depending on the value (in the example, 3 colors and the slider on the green label should be green, yellow on yellow, and so on)
I have already added to the addon babel.min.js , react.production.min.js , react-dom.production.min.js , material-ui.production.min.js the latest versions as files. Everything that is specified in the material-ui example CDN started
The addon was created according to the description from adding JS as addon vaadin 7
Java class example
#JavaScript({
"vaadin://addons/materialui/resources/js/babel.min.js",
"vaadin://addons/materialui/resources/js/react.production.min.js",
"vaadin://addons/materialui/resources/js/react-dom.production.min.js",
"vaadin://addons/materialui/resources/js/material-ui.production.min.js",
"vaadin://addons/materialui/resources/js/sliderComponent.jsx",
"vaadin://addons/materialui/resources/js/materialui-connector.js",})
#StyleSheet("vaadin://addons/materialui/resources/css/materialui.css")
public class MaterialUI extends AbstractJavaScriptComponent {
public MaterialUI() {
addStyleName("v-materialui");
}
#Override
protected MaterialUIState getState() {
return (MaterialUIState) super.getState();
}
}
But then I have a stupor. In the connector, I tried to write as in the examples, directly. I tried to create my own file.js in the code was extends React.Component. Each time it ended with an error on an unidentified character '<' or on the use of an undefined ReactDOM.
The last attempt returns no errors, but gives no result at all [materialui-connector.js]:
window.ru_rlisystems_web_platform_addons_materialui_MaterialUI = function() {
let element = this.getElement();
let rootEl = document.createElement("rootMUI");
element.appendChild(rootEl);
let importScript = document.createElement("script");
importScript.type = 'text/babel';
importScript.innerHTML = 'const {\n' +
' Slider,\n' +
' Box\n' +
' } = MaterialUI;\n' +
'\n' +
' const marks = [\n' +
' {\n' +
' value: 0,\n' +
' label: \'0°C\',\n' +
' },\n' +
' {\n' +
' value: 20,\n' +
' label: \'20°C\',\n' +
' },\n' +
' {\n' +
' value: 37,\n' +
' label: \'37°C\',\n' +
' },\n' +
' {\n' +
' value: 100,\n' +
' label: \'100°C\',\n' +
' },\n' +
'];\n' +
'\n' +
'function valuetext(value) {\n' +
' return `${value}°C`;\n' +
'}\n' +
'\n' +
' // Create a theme instance.\n' +
' const theme = createTheme({\n' +
' palette: {\n' +
' primary: {\n' +
' main: \'#556cd6\',\n' +
' },\n' +
' secondary: {\n' +
' main: \'#19857b\',\n' +
' },\n' +
' error: {\n' +
' main: colors.red.A400,\n' +
' },\n' +
' },\n' +
' });\n' +
'\n' +
' function App() {\n' +
' return (\n' +
' <Box sx={{ width: 300 }}>\n' +
' <Slider\n' +
' aria-label="Small steps"\n' +
' defaultValue={20}\n' +
' getAriaValueText={valuetext}\n' +
' step={1}\n' +
' marks\n' +
' min={0}\n' +
' max={100}\n' +
' valueLabelDisplay="on"/>\n' +
' </Box>\n' +
' );\n' +
' }\n' +
'\n' +
' const root = ReactDOM.createRoot(document.getElementById(\'rootMUI\'));\n' +
' root.render(\n' +
' <App />\n' +
' );';
element.appendChild(importScript);
this.onStateChange = function() {
}
};
I tried to put the render in a separate file and connect it via #JavaScript, but I get the error
Uncaught SyntaxError: Unexpected token '<' (at
sliderComponent.jsx:32:9)
const { React } = require('./react.production.min')
const {
Slider,
Box
} = require('material-ui.production.min')
const marks = [
{
value: 0,
label: '0°C',
},
{
value: 20,
label: '20°C',
},
{
value: 37,
label: '37°C',
},
{
value: 100,
label: '100°C',
},
];
function valuetext(value) {
return `${value}°C`;
}
function App() {
return (
<Box sx={{ width: 300 }}>
<Slider
aria-label="Small steps"
defaultValue={20}
getAriaValueText={valuetext}
step={1}
marks
min={0}
max={100}
valueLabelDisplay="on"/>
</Box>
);
}
const root = ReactDOM.createRoot(document.getElementById('rootMUI'));
root.render(
<App />
);
Is there any chance of using this library in vaadin 7? Or maybe there are examples and libraries easier to achieve my goals?
Related
I'm getting a list of objects and printing their content in the HTML page dynamically but only the last object is getting printed in all the added divisions.
Here is the js code:
var thelist = JSON.parse(sessionStorage.getItem("suspectList"));
for (var k in thelist) {
$(document).ready(function () {
$('#outerdiv').append('<div class="card"><h5 class="card-header">' + 'Crime: ' + thelist[k]['crime'] + '</h5><div class="card-body"><h5 class="card-title">' + 'Suspect name : ' + thelist[k]['name'] + '</h5><p class="card-text">' + 'Date of birth: ' + thelist[k]['dob'] + '</p>Enter Statement</div></div>');
});
console.log(thelist[k]['name'] + ' ' + thelist[k]['phone'] + ' ' + thelist[k]['dob']);
}
Here is the output:
Here is the console log
I have a nested array inside a list like the following:
{total_results, page, results [id, species_guess, observed_on_details {date, week, month, hour, year}]}
I am trying to get just the id, species_guess, and date using forEach.
function observationSummary2(data) {
data.results.forEach(element =>
console.log('#' + data.results.id +
" - " + data.results.species_guess +
' (' + data.results.observed_on_details.date + ')')
);
}
This is saying " Cannot read property 'date' of undefined ". I have tried using a for loop like this and it worked just fine.
for (let i = 0; i < data.results.length; i++) {
console.log('#' + data.results[i].id + " - " + data.results[i].species_guess + ' (' + data.results[i].observed_on_details.date + ')');
}
Can anyone tell me where am I doing wrong here, sorry I am still new at this language.
you should use foreach as follow
function observationSummary2(data) {
data.results.forEach(element =>
console.log('#' + element.id +
" - " + element.species_guess +
' (' + element.observed_on_details.date + ')')
);
}
Instead of
function observationSummary2(data) {
data.results.forEach(element =>
console.log('#' + data.results.id +
" - " + data.results.species_guess +
' (' + data.results.observed_on_details.date + ')')
);
}
Replace "data.results" with "element"
function observationSummary2(data) {
data.results.forEach(element =>
console.log('#' + element.id +
" - " + element.species_guess +
' (' + element.observed_on_details.date + ')')
);
}
More info about "forEach()" here:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
I was trying to make a notification with line notify but I dont know how to insert a command that puts a link from my google sheet to the message of the notification
// Line Notify
function onFormSubmit() {
var form = FormApp.openById('1ELczQ-uW1mauQrHFBpHK2pQnCCkvPf_4Nq-DPqM4nMw');
var fRes = form.getResponses();
var formResponse = fRes[fRes.length - 1];
var itemResponses = formResponse.getItemResponses();
var link = shape.getLink();
if (link != null && link.getLinkType() == SlidesApp.LinkType.URL) {
Logger.log('Shape has link to URL: ' + link.getUrl());
}
var msg = 'Electric Forklift Incentive'
+ ' \n' + itemResponses[5].getItem().getTitle() + ': ' + itemResponses[5].getResponse()
+ ' \n' + itemResponses[0].getItem().getTitle() + ': ' + itemResponses[0].getResponse()
+ ' \n' + itemResponses[1].getItem().getTitle() + ': ' + itemResponses[1].getResponse()
+ ' \n' + itemResponses[2].getItem().getTitle() + ': ' + itemResponses[2].getResponse()
+ ' \n' + itemResponses[3].getItem().getTitle() + ': ' + itemResponses[3].getResponse()
+ ' \n' + itemResponses[4].getItem().getTitle() + ': ' + itemResponses[4].getResponse()
+ ' \n' + itemResponses[4].getItem().getTitle() + ': ' + itemResponses[4].getResponse()
sendLineNotify(msg);
}
function sendLineNotify(message) {
var token = ["DdiU5tUykpSRpxRVqmEnM7ul3hcE3NEvc6Vzwknyzo7"];
var options = {
"method": "post",
"payload": "message=" + message,
"headers": {
"Authorization": "Bearer " + token
}
};
UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}
}
In this case i want to null check by using column IS NULL..here column specify uniquename.
Uniquename is a integer column.
filterExpression = objColumnSettings.UniqueName + ' <> ' + objColumnSettings.FilterValue + ' AND ';
Here i have done like this.
This works but i want to use column IS NULL rather than ISNULL(column, value)
filterExpression = " ISNULL( " + objColumnSettings.UniqueName + " , 0 ) " + ' <> ' + objColumnSettings.FilterValue + ' AND ';
Please suggest
Thanks in advance;
should be
filterExpression = objColumnSettings.UniqueName + " IS NUL OR " + objColumnSettings.UniqueName + ' <> ' + objColumnSettings.FilterValue + ' AND ';
I working on one application, and I started learning ASP.NET so I am begginer and I am trying to add one field in view.
So, I have Firstname,Address, ZIP, State etc and I want for every medical provider add his|her speciality. I create a table and make connection beatween two table.
When I add SPeciality, it doesnt show up in view. I have no idea where I made mistake.
https://i.imgur.com/YBc5dVZ.jpg
https://i.imgur.com/m0haaIW.jpg
https://i.imgur.com/mAvjNLc.jpg
var id = $(this).attr('data-id');
$.getJSON("/NfDocuments/MedicalInput", { id: id },
function (data) {
$('#medInput').empty();
$.each(data, function () {
// $("#medInput").append("'" + this.Id + "'");
//console.log(this.Id);
var medInput = document.getElementById("medInput");
medInput.value = this.Firstname + ' - ' + this.Zip + ' ' + this.Address1 + ',' + this.City + ', ' + this.State + ' - ' + this.Mobile;
});
});
Any suggestion, comment ?
medInput.value = this.Firstname + ' - '
+ this.Zip + ' '
+ this.Address1 + ','
+ this.City + ', '
+ this.State + ' - '
+ this.Mobile;
You need to append this.SpecialityName (or whatever you have it named as when returned to the view) to medInput.Value:
medInput.value = this.Firstname + ' - '
+ this.Zip + ' '
+ this.Address1 + ','
+ this.City + ', '
+ this.State + ' - '
+ this.Mobile + ' - '
+ this.SpecialityName;
I'm assuming the id of each speciality is this.TypeId and that you have already mapped TypeId to some kind of SpecialityName before sending the object back to the view.