In my XML view for one of the fields I want to display "Yes" if value from Model parts is "S" or "P" and for rest of all the values want to display "No".
text="{= ${order>/parts} === 'S' ? "Yes" : ${order>/parts} === 'P' ? "Yes" : "No} }"/>
Also, how to write -
if ${order>/parts} has "S" AND ${order>/stock} has "A" then display Yes else No in the similar notion like above?
You should read about formatters, which are exactly what you require
I tried this small example and it works just fine. Maybe because you use double quotes in both opening the text property and at the values ("Yes" and "No"). Try replacing the " with ' in your values. If that doesn't work, you should check if {order>/parts} is not undefined.
View
<Input value="{= ${test1} === 'S' ? 'Yes' : ${test1} === 'P' ? 'Yes' : 'No'}" />
<Input value="{= ${test1} === 'S' ? ${test2} === 'P' ? 'Yes' : 'No' : 'No' }" />
or
<Input value="{= ${test1} === 'S' || ${test1} === 'P' ? 'Yes' : 'No'}" />
<Input value="{= ${test1} === 'S' && ${test2} === 'P' ? 'Yes' : 'No'}"/>
Controller
onInit: function() {
var oModel = new sap.ui.model.json.JSONModel({
test1: "S",
test2: "P"
});
var bindingContext = new sap.ui.model.Context();
bindingContext.oModel = oModel;
bindingContext.sPath = "/";
this.getView().setBindingContext(bindingContext);
this.getView().setModel(oModel);
}
Hope this will help you
<Input value="{= (${order>/parts} === 'S' || ${order>/parts} === 'P') ? 'Yes' : 'No' }" />
<Input value="{= (${order>/parts} === 'S' && ${order>/stock} === 'A') ? 'Yes' : 'No' }" />
It helped me too.
In my case it was using icons:
<Button icon="{= ${Approved} === true ? 'sap-icon://accept' : 'sap-icon://approve'}" press="onApproveProduct" />
Related
facing challenges making validation classes to reflect automatically on custom datepicker Flatpickr using React-Hook-Forms,
const { register, handleSubmit, errors, control } = useForm({
mode: 'onChange'
})
<FormGroup>
<Controller
name="dateControl"
control={control}
defaultValue={null}
rules={{ required: true }}
render={({ value, onChange }) => (
<Flatpickr
value={value}
onChange={onChange}
id="hf-picker"
options={{
altInput: true,
altFormat: 'F j, Y',
dateFormat: 'Y-m-d',
altInputClass: classnames(
'form-control flatpickr-input',
{
'is-invalid': errors.dateControl && true
}
)
}}
/>
)}
/>
</FormGroup>
After troubleshooting, I realize everything works except that component fails to re-render whenever the validation errors are updated by react-hooks-form, is there anyway I can force a manual re-render instead, thanks
I think this has nothing to do with RHF, but somehow the options prop of the <Flatpickr /> component isn't updated when the config changes.
I'm assuming your using the react-flatpickr package - what you could do is simply pass the key prop to this component and setting it to the errors object of that control. This will force a re-render every time the errors of that form control change.
const isNotEmpty = (array) => array?.length > 0 || "Required";
<Controller
name="dateControl"
control={control}
defaultValue={null}
rules={{ validate: isNotEmpty }}
render={({ value, onChange }) => (
<>
<Flatpickr
key={errors.dateControl}
value={value}
onChange={onChange}
id="hf-picker"
options={{
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
altInputClass: classnames("form-control flatpickr-input", {
"is-invalid": !!errors.dateControl
})
}}
/>
{errors.dateControl && <p>{errors.dateControl.message}</p>}
</>
)}
/>
I am trying to change the index 5 and 6 to opacity 0.2 but I do not know how to change specific className when mapping in react
Here is my following code:
const tabs = [
"Mission",
"Agreement",
"Calendar",
"Managers",
"Members",
"Invitees",
"Applicants",
"Sub-Team",
];
const [activeTab, setActiveTab] = useState(0);
<div className="team-management-tab-items">
{tabs.map((tab, index) => (
<div
className={
activeTab === index
? "team-management-tab-item selected"
: "team-management-tab-item"
}
key={tab}
role="button"
tabIndex={tab}
onKeyPress={() => {
return;
}}
onClick={() => {
if (editable === true) {
setActiveTab(index);
} else if (index !== 5 && index !== 6) {
setActiveTab(index);
}
}}
>
<span className="tab-item-text">{tab}</span>
<span className="tab-item-indicator" />
</div>
))}
</div>
</div>
<div className="team-management-tab-panes">
{tabs[activeTab] === "Mission" && (
<Mission
editable={editable}
teamId={teamId}
teamData={teamData}
fetchTeamData={fetchTeamData}
/>
)}
{tabs[activeTab] === "Agreement" && (
<Agreement
teamData={teamData}
agreement={agreement}
editable={editable}
teamId={teamId}
fetchTeamData={fetchTeamData}
/>
)}
...
);
Here is how my project look like:
So basically I want to change opacity Invitees and Applicants to 0.2. How can I do that?
There are a few ways to do this, the easiest would likely be adding an id tag to the div like:
{tabs.map((tab, index) => (
<div
id = {tab}
className={
activeTab === index
? "team-management-tab-item selected"
: "team-management-tab-item"
}
and then in your css just add
#Invitees, #Applicants{
opacity: 0.2;
}
i have a form with multiple fields and a submit button. once i click the submit button it will come to this filterProperties function. i have a if condition inside that filterProperties function. so in that if condition i am checking whether the check-out date is null. if the if-condition is true i want to add has-error class to the datepicker. if anyone knows how to do this please help.
filterProperties = () => {
let checkin = this.state.checkin;
let checkout = this.state.checkout;
let guestCount = this.state.guest_count;
let cityID = this.state.selectedcityID;
let budget = parseFloat(this.state.textthree).toFixed(2);
if (checkin !== "" && checkout === '') {
alert('plz enter the check out date');
}
const cityProperties = {
checkin: checkin,
checkout: checkout,
guestCount: guestCount,
cityID: cityID,
budget: budget
}
console.log(cityProperties);
this.props.getCityProperties(cityProperties);
}
<FormItem style={{ marginBottom: '0' }} label="Check Out">
<span>
{getFieldDecorator('check_out', {
rules: [
{
required: true,
message: 'Please select a Check Out Date',
}, {
validator: this.checkCheckoutDates,
}
],
})(<DatePicker
className={className}
disabled={(this.state.checkin === '')}
disabledDate={this.disabledDateCheckout}
onChange={(e) => this.dateSelected(e, 'checkout')}
defaultValue={moment(new Date((new Date()).valueOf() + 1000 * 60 * 60 * 24))}
format={dateFormat}
/>)}
</span>
</FormItem>
Try this-
<DatePicker
className={(this.state.checkin !== "" && this.state.checkout === "")? "class-name": ""}
disabled={(this.state.checkin === '')}
disabledDate={this.disabledDateCheckout}
onChange={(e) => this.dateSelected(e, 'checkout')}
defaultValue={moment(new Date((new Date()).valueOf() + 1000 * 60 * 60 * 24))}
format={dateFormat}
/>
You can use something like this
<Element className={`${this.state.flag ? className : ''}`} />
How to add inline style in this given code? I just want to add an extra style when sideListMenu === 'addNoteMenu'
Here is my code..
<div className="dashboard-side-list-menu_content">
{sideListMenu === 'additionMenu' && <DashboardAdditionMenu onHideSideListMenu={onHideSideListMenu} onShowSideListMenu={onShowSideListMenu} patientDetails={patientDetails} />}
{sideListMenu === 'actionMenu' && <DashboardActionMenu onHideSideListMenu={onHideSideListMenu} onShowSideListMenu={onShowSideListMenu} patientDetails={patientDetails}/>}
{sideListMenu === 'addPatientMenu' && <DashboardAddPatient onHideSideListMenu={onHideSideListMenu} />}
{(sideListMenu === 'addInsuranceMenu' && patientId) && <DashboardAddInsuranceMenu onHideSideListMenu={onHideSideListMenu} patientId={patientDetails.PatientNotesDocsModel.PatientInfo.PatientID} patientDetails={patientDetails}/>}
{(sideListMenu === 'addDocumentMenu' && patientId) && <DashboardAddDocumentMenu onHideSideListMenu={onHideSideListMenu} patientId={patientDetails.PatientNotesDocsModel.PatientInfo.PatientID} />}
{(sideListMenu === 'addNoteMenu' && patientId) && <DashboardAddNoteMenu onHideSideListMenu={onHideSideListMenu} patientId={patientDetails.PatientNotesDocsModel.PatientInfo.PatientID} />}
</div>
You Can Use internal style
DashboardAdditionMenu{
/*Your style here*/
}
DashboardActionMenu {
/*Your style here*/
}
Inline styles can be given to a Tag using:
<div style={{color: 'red', fontSize: '20px'}}>Hello There!!</div>
If you are looking to add a style conditionally,
pass the style via props based on your condition.
Ok, I'm having a hard time trying to create an object array that I can use within a select box...
Here is the code I have so far:
var oTranslators = {{"bosniancroatianserbian" : null} , {"dutch" : {"name":"willemjan","id":2}} , {"german" : {"name":"chilly","id":11}} , {"german_informal" : {"name":"Boantio","id":1640}} , {"greek" : null} , {"hungarian" : {"name":"Rudi","id":69}} , {"norwegian" : null} , {"russian" : {"name":"Bugo","id":43}} , {"spanish" : {"name":"Diego Andr\u00e9s","id":413}} };
function lang_switch(val)
{
if (val == 1)
document.getElementById("lang").innerHTML = '<select name="lang_name" onchange="trans_switch(this.selectedIndex);"><option value="bosniancroatianserbian">Bosnian/Croatian/Serbian</option><option value="dutch">Dutch</option><option value="german">German</option><option value="german_informal">German Informal</option><option value="greek">Greek</option><option value="hungarian">Hungarian</option><option value="norwegian">Norwegian</option><option value="russian">Russian</option><option value="spanish">Spanish</option></select><label for="translator">Translator: <select name="translator" id="translator"></select></label>';
else
document.getElementById("lang").innerHTML = '';
}
function trans_switch(oBName)
{
document.upload.translator.options.length = 0;
var oBoard = oTranslators[oBName];
for (var i = 0; i < oBoard.length; i++) {
translator.options[translator.options.length] = new Option(oBoard.name, oBoard.id, false, false);
}
}
And the HTML:
<form name="upload" enctype="multipart/form-data" action="http://mydomain.com/myaction.php" method="post" autocomplete="off">
<dl class="settings">
<dt>
<strong>Choose a file to upload:</strong>
</dt>
<dd>
<input type="file" name="dp_file" size="38" class="input_file" />
</dd>
<dt>
<select name="down_area" onchange="lang_switch(this.value);">
<option value="0">Main Download</option>
<option value="1">Language Packs</option>
</select>
</dt>
<dd>
<div id="lang"></div>
</dd>
</dl>
<div style="text-align: right;"><input name="upload" type="submit" value="Upload" class="button_submit" /></div>
</form>
Basically, I am getting error stating that lang_switch is undefined, which is nuts, because it's right there. Is there something wrong with my object array? Did I not define it properly? This is coming from a json_encode, but it is a multidimensional array and I had to fix it a little, so am using this php code to fix it, within a for loop:
$oTrans = '';
$i = 0;
foreach($context['languages'] as $lang => $language)
{
$i++;
$oTrans .= '{"' . $lang . '" : ' . json_encode($language['translator'][$lang]) . '} ' . (count($context['languages']) == $i ? '};' : ', ');
Am I not doing this right? What is wrong with the oTranslators object array above?
The problem you are facing with your code is that while you are trying to make a javascript-array of objects, you are attempting to initialize the array using object-brackets: {.
The result will give you an error, because you cannot initialize an object in the following way:
{{Prop1:val}, {Prop2:val}};
It would need to be the following:
{Prop1:val, Prop2:val};
Therefore, to fix your array, all you need to do is replace the first { and last } with array brackets, [ and ]:
[{"bosniancroatianserbian" : null} , {"dutch" : {"name":"willemjan","id":2}} , {"german" : {"name":"chilly","id":11}} , {"german_informal" : {"name":"Boantio","id":1640}} , {"greek" : null} , {"hungarian" : {"name":"Rudi","id":69}} , {"norwegian" : null} , {"russian" : {"name":"Bugo","id":43}} , {"spanish" : {"name":"Diego Andr\u00e9s","id":413}} ];