I'm using the description field to hold an value that I don't want to be displayed, is it possible to set this property to visible:false or set to width to 0?
new sap.m.Input("idAltDistInput"+refDocID+sequenceID, {value:"{AltDistrictDesc}",
description: { path : 'AltDistrictID' }
:
visible : false doesn't seem to work.
Yes you can by adding StyleClass.
sap.m.Input("id",{
//Properties
}).addStyleClass("InputDescripTionHidden");
Add following css
.InputDescripTionHidden>span{
display:none
}
Your comment above suggests that you want to store some hidden value, for later use.
Rather than "hijack" (in the nicest sense of the word) another property, you should consider using Custom Data, which is designed for this sort of thing. Here's an example.
new sap.m.List({
mode: "SingleSelectMaster",
items: {
path: "/records",
template: new sap.m.InputListItem({
label: "District",
content: new sap.m.Input({
value: "{AltDistrictDesc}",
customData: [new sap.ui.core.CustomData({
key: "DistrictID",
value: "{AltDistrictID}"
})]
})
})
},
select: function(oEvent) {
var id = oEvent.getParameter("listItem")
.getContent()[0] // the Input control
.getCustomData()[0] // the only Custom Data
.getValue();
alert("Selected District ID : " + id);
}
})
.setModel(new sap.ui.model.json.JSONModel({
records: [{
AltDistrictID: "D1",
AltDistrictDesc: "District 1"
}, {
AltDistrictID: "D2",
AltDistrictDesc: "District 2"
}]
}))
.placeAt("content");
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"></script>
<div class="sapUiBody" id="content"></div>
(Note that for simplicity, I'm just grabbing the first content and the first custom data within that content in the select listener. You will want to do this slightly more precisely in real code.)
Related
I made a generic function that generates some form fields, because I need them at many different places in my app.
It has an optional parameter for setting the visibility of the fields.
But now I need to add additional visibility rules for specific fields.
These additional rules should stay the same for all function calls, so theoretically there's no need to set them through a new parameter.
Unfortunately these specific rules are overwritten if the visibility parameter is set.
My goal is to extend these rules with the visibility parameter.
Here's a minimal example:
The specific visibility rule is that an input's value has to be greater than 0.
On one function call another visibility rule is that the value of FlagSet need to be equal to "yes".
let data = {
"FlagSet": "yes",
"Data": [{
"Size": 1
},
{
"Size": 0
}
]
};
let oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
let oPage = new sap.m.VBox();
oPage.setModel(oModel);
let additionalVisibilityRules = [
false,
{
path: "/FlagSet",
formatter: (flagSet) => (flagSet === "yes")
}
];
for (let i = 0, l = data.Data.length; i < l; i++)
oPage.addItem(getFields(i, additionalVisibilityRules[i]));
function getFields(index, oVisibility) {
let oCtrl = new sap.m.Input({
value: `{/Data/${index}/Size}`
}).bindProperty("visible", {
path: `/Data/${index}/Size`,
formatter: (size) => (size > 0)
});
if (oVisibility) {
oCtrl.bindProperty("visible", oVisibility);
}
return oCtrl;
}
oPage.placeAt("content");
<script id='sap-ui-bootstrap' type='text/javascript' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_bluecrystal">
</script>
<body class='sapUiBody'>
<div id='content'></div>
</body>
How can I combine it so that the second input field is only visible if both its value is above 0 AND FlagSet is equal to "yes"?
If you need multiple model properties, you could try using Composite Binding
Here is an example from the documentation:
<TextField value="{
parts: [
{path:'birthday/day'},
{path:'birthday/month'},
{path:'birthday/year'}
],
formatter:'my.globalFormatter'}"/>
For more information see:
https://ui5.sap.com/#/topic/e2e6f4127fe4450ab3cf1339c42ee832
I implemented a multilanguage support for the website. Using VueJS and VueI18n. There are 3 pages - home, registers and messages. The problem is in messages, where there is a dynamically rendered table - vue-good-table. While being on this page(with the table) if I click on the buttons for changing languages, everywhere the languages is being changed dynamically, but not the labels and placeholders of the table. If I go to one of the other pages and comeback to the table, the labels and placeholders are updated correctly. Can you help me make it change while I am on the same page?
I was wondering if beforeMount() would help in this situation?
main.js
import VueI18n from 'vue-i18n'
import {messages} from './locales/bg_en_messages'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'bg', // set locale
fallbackLocale: 'bg',
messages // set locale messages
});
Vue.prototype.$locale = {
change (lang) {
i18n.locale = lang
},
current () {
return i18n.locale
}
};
Messages.vue:
<vue-good-table
:columns="columns"
:rows="items"
:paginate="true"
:lineNumbers="true">
</vue-good-table>
<script type="text/javascript">
export default {
data(){
return {
items:[],
columns: [
{
label: this.$t("columns.date"),
field: 'changeddate',
type: 'String',
filterable: true,
placeholder: this.$t("columns.date")
},
{
label: this.$t("columns.userChange"),
field: 'userchange',
type: 'String',
filterable: true,
placeholder: this.$t("columns.userChange")
}
]
}
}
}
App.vue
<div style="padding: 10px; width: 99%;">
<ui-button #click="changeLang('bg')">
<img src="../src/assets/images/skin/Flag1.png" v-bind:alt="home" height="15" width="25"/>
</ui-button>
<ui-button #click="changeLang('en')">
<img src="../src/assets/images/skin/Flag2.png" v-bind:alt="home" height="15" width="25"/>
</ui-button>
</div>
<script>
export default {
name: 'Localization',
methods: {
changeLang: function(newLang){
this.$locale.change(newLang)
}
}
}
</script>
The reason is that the data that's changing is nested inside an object itself and your template only listens to changes to that parent object and not for its children (your language data). So even if that changes, your view wont notice it. If you use data from your translation directly in the template using the template syntax, the data will re-render automatically because that is not nested(that's why it probably works everywhere else).
Now of course you can't do that in your table's case, because your table component accepts nested data only, so the workaround would be to use a computed property for your columns, instead of putting them into your component's data. This way all changes will be mirrored to your component.
Simply change your component like that and you should be good to go:
export default {
data(){
return {
items:[]
}
},
computed: {
columns () {
return [
{
label: this.$t("columns.date"),
field: 'changeddate',
type: 'String',
filterable: true,
placeholder: this.$t("columns.date")
},
{
label: this.$t("columns.userChange"),
field: 'userchange',
type: 'String',
filterable: true,
placeholder: this.$t("columns.userChange")
}
]
}
}
}
I want to add an additional text property to sap.ui.unified.MenuItem. It currently has only one text property.
I am trying the following
sap.ui.unified.MenuItem.extend("ExtendedMenuItem",{
metadata:{
properties:{
SetText : {type: "string"}
},
aggregations: {
_SecondText : {type: "sap.ui.commons.Label", multiple : false, visibility: "public"}
}
},
init: function(){
var oSecondText = new sap.ui.commons.Label("TL",{
text: this.SetText
});
this.addAggregation("_SecondText",oSecondText);
},
renderer:"sap.ui.unified.MenuItemRenderer"
});
var oTestCopy = new ExtendedMenuItem("TC",{
text: "TEST COPY",
SetText: "CTRL+TEST"
});
but the second text property is not being displayed.
What can i do to add a second text property to a standard UI5 control ?
Here is an example from the official documentation of Custom Controllers. You have to implement the renderer itself to place the new m.Label element on the UI. In the renderer, you can operate with standard HTML elements. For more details, check the linked source.
The values are loaded from the data source but on ui no text is shown.
var r0c1 = new sap.ui.commons.DropdownBox("r0c1");
var oItemTemplate1 = new sap.ui.core.ListItem();
property binding is done:
oItemTemplate1.bindProperty("text", "{ZtmDockid}");
bind the items:
r0c1.bindItems("/d/results", oItemTemplate1);
Data is properly coming, but on UI its not showing the text.
there are two ways to bind data to a control.
First way using bindProperty:
var oItemTemplate1 = new sap.ui.core.ListItem();
oItemTemplate1.bindProperty("text", "value");
(notice: usage of { })
or binding the values when creating the control:
var oItemTemplate1 = new sap.ui.core.ListItem({
text: "{value}"
});
(you need to use { } to indicate dynamic values)
Herrlock is correct, but I wanted to draw out the subtlety - explicit binding with the bind* functions requires no curly braces ... these are only needed for embedded, or implicit binding.
Here's your code with the braces removed from your bindProperty's second parameter, as a runnable snippet.
// Code from question
var r0c1 = new sap.ui.commons.DropdownBox("r0c1");
var oItemTemplate1 = new sap.ui.core.ListItem();
oItemTemplate1.bindProperty("text", "ZtmDockid");
r0c1.bindItems("/d/results", oItemTemplate1);
// Extra code
r0c1
.setModel(new sap.ui.model.json.JSONModel({
d : {
results : [
{ ZtmDockid : "1" },
{ ZtmDockid : "2" },
{ ZtmDockid : "3" }
]
}
}))
.placeAt('content');
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal"></script>
<div id="content"></div>
I am building a handelbars helper that renders a checkbox group. My goal is to display a checkbox group with something like this and get two-way binding on selectedOptions:
{{form-checkboxGroup options=allOptions selectedOptions=selectedOptions}}
I've used this pattern successfully with other form components and it's a big win. I'm able to render my allOptions and selectedOptions values as a checkbox group, but it's the two-way binding that's tripping me up. Any idea what I'm missing?
By the way, I'm using ember-cli, but that doesn't affect anything relating to this issue.
Here's my setup:
Handlebars Helper: helpers/form-checkbox-group.js
The sole purpose of this file is to link the Handelbars expression {{form-checkboxGroup}} to the view and template below.
import FormCheckboxGroupView from 'my-app/views/util/form/form-checkbox-group';
export default Ember.Handlebars.makeBoundHelper(function( options ) {
return Ember.Handlebars.helpers.view.call(this, FormCheckboxGroupView, options);
});
CheckboxGroup Handlebars Template: templates/util/form/form-checkbox-group.hbs
...
{{#each user in view.combinedOptions}}
{{input type="checkbox" name="view.fieldName" checked=user.checked }} {{user.name}}
{{/each}}
...
CheckboxGroup View: views/util/form/form-checkbox-group.js
...
export default FormCheckboxGroupView = Ember.View.extend( FormFieldMixin, {
templateName: 'util/form/form-checkbox-group',
selectedOptions: function() {
console.log("When triggered this could update view.selectedOptions");
}.observes('view.combinedOptions.#each.checked'),
// combines the "options" and "selected options" into a single array of "combinedOptions" explicitly indicating what's checked
combinedOptions: function() {
...
// sample result of combinedOptions:
// { name: "Johnny Five", id: "12", checked: true }
return combinedOptions;
}.property('view.options', 'view.selectedOptions')
});
And finally, to actually use my Handlebars helper, here's the consuming page's template and corresponding controller:
Consuming Page: templates/my-page.hbs
{{form-checkboxGroup options=allUsersArray selectedOptions=selectedUsersArray fieldName="selectedProvidersArray" }}
Backing Controller for Consuming Page: controllers/my-page.js
export default MyPageController = Ember.Controller.extend( FormMixin, {
allUsersArray: [
{ name: 'Bill Huxtable', id: 'billy' },
{ name: 'Samantha Jones', id: 'jones' },
{ name: 'Tony Pepperoni', id: 'tonyp' },
{ name: 'Ridonk Youliss', id: 'silly' }
],
selectedUsersArray: [
{ name: 'Tony Pepperoni', id: 'tonyp' },
{ name: 'Ridonk Youliss', id: 'silly' }
],
...
});
So, all of this successfully renders the checkbox group nicely, but my efforts to capture the fact that a checkbox has been newly selected by using observes("view.combinedOptions.#each.checked') is not working.
Any idea on how I can this up for two-way binding? Thanks in advance for assistance!
No jsbin so I'm flying blind, but try this:
selectedOptions: function() {
console.log("When triggered this could update view.selectedOptions");
}.observes('combinedOptions.#each.checked')
view.property is how you access view from template. You don't need that from the view itself (unless you have view property on your view).