I have a main.controller.js where I want to check the value of a Checkbox. If the checkbox has been checked, the first flexbox will be shown and the second flexbox will not be shown in the fragment.
This my controller.js:
checkDone: function () {
var checkV = this.byId("ch1").getSelected();// not working
}
This my fragment.xml
<CheckBox id="ch1" select ="checkDone" text="Check"></CheckBox>
<FlexBox class="sapUiSmallMarginEnd" id="f1">
<Input value=""></Input>
</FlexBox>
<FlexBox direction="Column" id="f2">
<Input value=""></Input>
</FlexBox>
This code works (see example with sap.m.Checkbox here).
Just a recommendation: in your checkbox's 'select' handler you use:
this.byId("ch1").getSelected();
in order to whether the checkbox is selected or not, but this value is already given as a parameter of the select handler:
checkDone: function (oEvent) {
var bSelected = oEvent.getParameter('selected'));
}
Simmilar is for the sap.ui.commons.Checkbox API. Check change event.
It looks like the View.byId function returns an element in its initial form. When you find element from DOM, getSelected() function works as expected.
Instead of getSelected() try getChecked().
getChecked() will return true or false based on checked/unchecked.
Related
I try to get an context menu on a table cell which is of type input.
The right mouse click only works in the part outside of the input field.
Is there a way to propergate the event from the input field to the cell below?
Also there does not seem to be an click event on an input field.
My tries can be seen in the plnkr
https://plnkr.co/edit/BMozXm7uRPNlgzUf
codewise:
<t:Table rows="{/}" visibleRowCount="100"
minAutoRowCount="10" visibleRowCountMode="Auto" id="table0"
filter="onTableFilter" class="sapUiNoMargin sapUiNoContentPadding"
beforeOpenContextMenu="onContextMenu">
<t:columns>
<t:Column width="4em" filterProperty="CompCode"
sortProperty="CompCode" resizable="true" autoResizable="true"
class="sapUiLargeNegativeMarginBeginEnd"
click="oninputclick"
press="oninputclick">
<Label text="Comp Code" wrapping="true" class="test_maybe_he"/>
<t:template>
<Input value="{CompCode}" class="test_maybe_he" click="oninputclick"
press="oninputclick"/>
</t:template>
</t:Column>
I have the beforeOpenContextMenu="onContextMenu" in the table tag.
And click="oninputclick" press="oninputclick" in the input tag.
right click is only registerd outside of the input field. (In the sapui5 samples with an Text tag it seems to work.)
I suggest a custom control which inherits from sap.m.Input.
This control should have a new event (e.g. rightPress) and this event should be fired when the native browser event onContextMenu is triggered. Also the native context menu should not be shown.
sap.ui.define([
"sap/m/Input"
], function (Input) {
"use strict";
return Input.extend("gsan.ruleedit.control.MyInput", {
metadata: {
events: {
rightPress: {}
}
},
renderer: {},
oncontextmenu: function(oEvent) {
this.fireRightPress();
oEvent.preventDefault();
}
});
});
You can then use your custom control like any other
<mvc:View xmlns:my="gsan.ruleedit.control"
... />
<my:MyInput value="{CompCode}" rightPress="onContextMenu" />
Working sample: https://plnkr.co/edit/XAfC7SGpdf3RxiDF
I have the following Javascript code and I'm trying to make it dynamic within a sightly component.
<script type="text/javascript">
$('#map').usmap({
showLabels: true
});
</script>
I need the "true" to toggle based on a checkbox in the dialog. And it needs to be a boolean, not a string.
example.html
<script type="text/javascript">
var fillColor = '#${properties.fillColor #context="scriptString"}';
var hoverColor = '#${properties.hoverColor #context="scriptString"}';
var showStateLabels = '${properties.option2 #context="text"}';
var defaultStateColor = ${properties.option2 ? '#fff' : '#AAA' #context='scriptString'};
console.log("showStateLabels");
$('#map').usmap({
showLabels: showStateLabels
});
</script>
<div id="map" style="width: 800px; height: 500px;"></div>
dialog.xml
<option2 jcr:primaryType="cq:Widget"
fieldLabel="Map Option 2?"
name="./option2"
width="150"
xtype="selection"
type="checkbox"/>
I'm able to get it to console.log "true" if the checkbox is checked, but nothing if the checkbox isn't checked. How can I make this variable toggle true/false based on a dialog checkbox?
It looks like this is a question regarding Classic UI dialogs.
If so, please refer to: https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/xtypes.html, see "checkbox" section.
your widget should have xtype="checkbox"
And the classic UI docs for it are here: https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.Checkbox
you could try adding defaultValue="false"
additionally, you can try Nate's suggestions in the post: http://www.nateyolles.com/blog/2015/11/aem-checkboxes-using-sling-post-servlet. in your case, this would be:
<option2 jcr:primaryType="cq:Widget"
fieldLabel="Map Option 2?"
name="./option2"
width="150"
defaultValue="false"
xtype="checkbox"/>
<option2Type
jcr:primaryType="cq:Widget"
ignoreData="{Boolean}true"
name="./option2#TypeHint"
value="Boolean"
xtype="hidden"/>
Alternatively. and if you don't want to play with classic widgets, you could just render false when the property does not exist:
var showStateLabels = ${properties.option2 ? 'true' : 'false' #context='scriptString'};
could also try context='scriptToken', cant remember which one is applicable in this case, but easy to verify.
Hope this helps.
If the checkbox is not checked, the property will be empty or will not exist at all in AEM. If the property is not empty, you know that the checkbox is checked.
So you can just do something like this:
showLabels = '${properties.option2 #context="text"}' ? true : false;
Hope that helps.
ComboBox is not showing state like Error, Warning with highlight around the borders. But it does change the state. For example, if it is error state, and if I try to enter new value in combobox, it will show that "invalid Entry" tip near the box. But the box borders are never highlighted in red. Below is the code:
XML.view
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout">
<Dialog id......>
<ComboBox id="combo1" change="cChanged" items="{path: '/results'}">
<items>
<core:Item key="{ID}" text="{Name}"/>
</items>
</ComboBox>
</Dialog>
Controller.js
cChanged: function(oEvent) {
var newval = oEvent.getParameter("newValue");
var key = oEvent.getSource().getSelectedItem();
if (newval !== "" && key === null) {
sap.ui.getCore().byId("combo1").setValueState("Error");
oEvent.getSource().setValue("");
sap.m.MessageToast.show("Please select from existing IDs")
flag = false;
} else {
oEvent.getSource().setValueState('None');
}
You can also access combo1 control instance by using oEvent.getSource() event OR use byId() from the sap.ui.core.Fragment class and not sap.ui.getCore().byId()
Also, if you are writing a logic only to validate if what the user input in the combobox is a valid item, consider replacing your ComboBox by the sap.m.Select control.
Both ComboBox and Select has same look and feel, but Select does not allow a manual input. It can also have an empty option if you use the property forceSelection
I'm try to create test for my Bootstrap project. I'm use Coypu. But I ran into a some problem. I can't check my check-boxes. The problem is that I changed style form my check-box. And now standard Bootstraps check-boxes is hidden. The new check-box is hidden inside standard pattern:
<label>
<input type="checkbox" data-bind="checkedValue: key, checked: $parent.selectedCatchments, attr: { id: key }" class="catchment-checkbox" />
<span data-bind=" text: value, attr: { for: key }" class="lbl padding-8 openSans-Text catchment-checkbox-span"></span>
</label>
The problem is that Coypu can't to find the hidden element on browser. And now I can't to check selected check-box or not.
This is standard check-box:
I turned off: opacity: 0 in CSS style.
And this is new checkbox with the new style.
How can I check the number of checked items in Coypu?
I can add ConsideringInvisibleElements = true inside SetUp method, but this option will be works always for all Tests. How I can change value of ConsideringInvisibleElements option on true or false when I need inside test code?
I'm find this variant:
var catchmentsCheckboxes = Browser.FindAllXPath("id('catchmentsColumn')/div[1]/div/label/input", null, new Coypu.Options { ConsiderInvisibleElements = true });
The first parameter: xPath to element;
The second parameter is can be null;
The third parameter is ConsideringInvisibleElements. And we can change value of this parameter on true or false.
I have a message box that I want to do some extra editing on a line. But once I show it, it remains transparent. Is there something that I'm missing to give it a normal background.
The fragment for the form:
<Label text="UnitPrice"/>
<Input id='unitpriceid' type="Text" text="{path: 'UnitPrice' }"/>
<Label text="Quantity"/>
<Input type="Text" text="{path: 'Quantity' }"/>
</form:SimpleForm>
</core:FragmentDefinition>
How I call the fragment.
handleLineItemPress : function (evt) {
var context = evt.getSource().getBindingContext();
var oLayout = sap.ui.xmlfragment("ApproveSESComponent.DO_SES.view.LinePopup", this);
var oModelTemp = this.getView().getModel().getData();
// get the view and add the layout as a dependent. Since the layout is being put
// into an aggregation any possible binding will be 'forwarded' to the layout.
var oView = this.getView();
oView.addDependent(oLayout);
var that = this;
sap.m.MessageBox.show(oLayout, {
icon: sap.m.MessageBox.Icon.INFORMATION,
title: "My message box title",
styleClass: "sapUiSizeCompact",
actions: [sap.m.MessageBox.Action.YES, sap.m.MessageBox.Action.NO],
onClose: function(oAction) { / * do something * / }
});}
I change the styleClass: "sapUiSizeCompact" to soemthing else and then added a background-color to this style.
Then the box was no longer transperant.
I don't think sap.m.MessageBox is designed for input other than simple button-based choices. Certainly that's how I read the documentation (and that's how message boxes typically work in other APIs):
Provides easier methods to create sap.m.Dialog with type sap.m.DialogType.Message, such as standard alerts, confirmation dialogs, or arbitrary message dialogs.
You may be able to shoehorn it into allowing you to add an input field but I don't think that's how it's designed (it looks undocumented to me) and don't be surprised if it breaks in a future release. Rather use sap.m.Dialog.
Same problem here...
Solution: I used the sap.m.MessageBox in a project based on sap.ui.common elements. Replaced it with sap.ui.common.MessageBox and I had a well working Message Box.