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")
}
]
}
}
}
Related
Is there a way to bind the class attribute of a ui5-input-template inside a sap.ui.table.Table to a model value?
What I tried so far is:
[
{
label: 'arow',
disabled: true,
class: 'myClass1',
data: [
{
value: 'rowVal1'
}
]
},
// ...
]
and
myTable.bindColumns("/columns", function (index: string, context: any) {
let indParts: string[] = index.split("-");
let ind = +indParts[indParts.length - 1];
var colLabel = context.getProperty().label;
let template = new sap.m.Input({
value: `{data/${ind}/value}`,
class: '{= ${class} }',
enabled: '{= !${disabled} && !${data/' + ind + '/disabled} }',
});
// template.addStyleClass('{class}');
// template.setClass('{class}');
let column = new sap.ui.table.Column({
label: colLabel,
width: `{width}`,
template: template,
});
return column;
});
myTable.bindRows("/rows");
It seems as if I cannot use the model binding here, only add static class values when I create the template. Is this right?
As suggested in the comment, one of the solutions is to enhance the control's set of properties with your own property to allow binding the style class.
Here is a working sample: https://embed.plnkr.co/ik9PIdHKvK8udpQt
And here a snippet from the control extension:
sap.ui.define([
"sap/m/Input",
"sap/m/InputRenderer",
], function(Input, InputRenderer) {
"use strict";
return Input.extend("demo.control.Input", {
metadata: {
properties: {
"styleClass": {
type: "string",
defaultValue: null,
bindable: true,
}
}
},
renderer: { // will be merged with the parent renderer (InputRenderer)
apiVersion: 2, // enabling semantic rendering (aka. DOM-patching)
// Implement the hook method from the parent renderer
addOuterClasses: function (oRenderManager, oInput) {
InputRenderer.addOuterClasses.apply(this, arguments);
oRenderManager
.class("demoControlInput") // Standard CSS class of demo.control.Input
.class(oInput.getStyleClass()); // Custom CSS class defined by application
},
},
});
});
As documented in the topic Extending Input Rendering, some base controls allow overwriting existing methods from the renderer. If you look at the sap.m.InputRenderer, for example, you can see that the renderer provides multiple hooks to be overwritten by subclasses such as the addOuterClasses.
And since styleClass in our customer control is a valid ManagedObject property, binding in JavaScript ("programmatically") also works:
new Input({ // required from "demo/control/Input"
// ...,
styleClass: "{= ${class}}"
});
I have a large forms to submit in single page.
<container>
<formA>
<formB>
<formC>
<submitButton>
<container>
it looks apparently like this. and I have a store which save every form data. then when user click submit button, I gather all form data using vuex store.
The problem is I need to update the form data in store everytime.
so I'll be like this in vue component
watch: {
userInput (val) {
this.updateState(val)
}
update state when input changes by watching form data(binded with v-model).
or like this which is documented in vuex doc.
userInput: {
get () {
return this.$store.state.userInput
},
set (val) {
this.updateState(val)
}
}
well.. I don't think these are good idea. Is there any better way to form handling with vuex?
I made a little tool which makes form handling wit Vuex a lot easier: vuex-map-fields
Example
Store
import Vue from 'vue';
import Vuex from 'vuex';
// Import the `getField` getter and the `updateField`
// mutation function from the `vuex-map-fields` module.
import { getField, updateField } from 'vuex-map-fields';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
fieldA: '',
fieldB: '',
},
getters: {
// Add the `getField` getter to the
// `getters` of your Vuex store instance.
getField,
},
mutations: {
// Add the `updateField` mutation to the
// `mutations` of your Vuex store instance.
updateField,
},
});
Component
<template>
<div id="app">
<input v-model="fieldA">
<input v-model="fieldB">
</div>
</template>
<script>
import { mapFields } from 'vuex-map-fields';
export default {
computed: {
// The `mapFields` function takes an array of
// field names and generates corresponding
// computed properties with getter and setter
// functions for accessing the Vuex store.
...mapFields([
'fieldA',
'fieldB',
]),
},
};
</script>
You can read more about vuex-map-fields on my blog: How to Handle Multi-row Forms with Vue, Vuex and vuex-map-fields
I would use deep watchers for this and have all fields in a object, you could use multiple approaches for saving the data, iterating over Object.keys to store each field with it's variable name in the form object, or storing the entire form, whatever you might need.
You could also use v-model.lazy="form.myfield" to indicate that you only want the binding to update once the user has left the field.
Form component
<template>
<div>
<!-- You can optionally use v-model.lazy="form.field1" to only update once user has exited the field or pressed enter -->
<input v-model="form.field1" />
<input v-model.lazy="form.field2" />
</div>
</template>
<script>
export default {
props: ['value'],
data: function () {
return {
internalForm: {
field1: null,
field2: null
}
}
},
watch: {
internalForm: {
handler: function (newValue) {
// Emit new form object to parent component so we can use v-model there
this.$emit('input', this.form)
// Or save form data
this.handleFormSave(this.form)
},
// Tell vue to do a deep watch of entire form object to watch child items in the object
deep: true
}
}
}
</script>
Parent component
<template>
<form-component v-model="forms.form1" />
<submit-button #click="saveAllFormData" />
</template>
<script>
export default {
data: function () {
return {
forms: {
form1: null // This will be updated when 'input' is emitted
}
}
},
watch: {
forms: {
handler: function (newValue) {
if (allFormsValid && readyToSave)
saveAllFormData(newValue);
},
deep: true
}
}
}
</script>
I had headache regarding this probem to.
Vuex doc describes that we need to update store for every field.
It's a loot of typing whatfor?
We make one solution that works.
It based on cloning store object to local one.
//We are passing (vuexstore) 'item' object from parent component:
//<common-item v-bind:item="item" ....
props: ['item'],
// create localItem - this is reactive object for vuex form
data: () => {
return {
localItem: null
}
},
// make clone on created event
created: function() {
this.localItem = this._clone(this.item)
},
// watch vuexstore 'item' for changes
watch: {
item: function(val) {
this.localItem = this._clone(this.item)
}
},
// map mutations and update store on event
methods: {
...mapMutations([
'editItem'
]),
updateItemHandler: function() {
this.editItem({ item: this._clone(this.localItem) })
},
_clone: function(o){
return JSON.parse(JSON.stringify(o))
}
},
Inside form use:
<input v-model="localItem.text" #keyup="updateItemHandler" type="text" class="form-control"></input>
I think this is only lack of vuex. There should be much shorter and built in solution.
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.)
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).
I have been working on this for a number of days now, but my limited JS knowledge seems to hurt me.
I am creating a dynamic Ext.Carousel component in my ST2 application, which is based on the contents of a Store file.
That all works fine, but I will show the code anyway, so that nothing is left to imagination:
Ext.getStore('DeviceStore').load(
function(i) {
Ext.each(i, function(i) {
if (i._data.name == 'Audio Ring') {
var carousel = Ext.ComponentManager.get('speakerCarousel');
var items = [];
Ext.each(i.raw.speakers, function(speaker) {
items.push({
sci: Ext.create('SmartCore.view.SpeakerCarouselItem', {
speakerId: speaker.speakerid,
speakerName: speaker.speakername,
speakerEnabled: speaker.speakerenabled
})
});
});
carousel.setItems(items);
}
});
})
Now, this adds me the appropriate number of items to the carousel. They display, but without the content I specified:
This is the Carousel itself:
Ext.define('SmartCore.view.SpeakerCarousel', {
extend: 'Ext.Carousel',
xtype: 'speakerCarousel',
config: {
id: 'speakerCarousel',
layout: 'fit',
listeners: {
activeitemchange: function(carousel, item) {
console.log(item);
}
}
}
});
This is the item class, that I want to fill the data from the store into:
Ext.define("SmartCore.view.SpeakerCarouselItem", {
extend: Ext.Panel,
xtype: 'speakerCarouselItem',
config: {
title:'SpeakerCarouselItem',
styleHtmlContent: true,
layout: 'fit'
},
constructor : function(param) {
this.callParent(param);
this.add(
{
layout: 'panel',
style: 'background-color: #759E60;',
html: 'hello'
}
)
}
});
Again, the right number of items shows in the carousel (11), but the content is not visible, nor is the background colour changed.
When I check the console.log(item) in the browser, the items show as innerItems inside the carousel object.
Any help is greatly appreciated!!
Well, I fixed it myself, or better, I found a workaround that seems to be what I want.
I ended up ditching the constructor all together.
Instead I overwrote the apply method for the 'speakerName' key-value pair.
From there, I can use:
this._items.items[0]._items.items[i].setWhatever(...)
to set the content inside the item.
If anyone knows the "real" way to do this, I would still greatly appreciate input!