I extend a standard fiori application and I would like to extend i18n also.
The structure of the extended app looks as the following:
And in the Component.js file, I notice the extension:
this.i2d.eam.pmnotification.create.s1.Component.extend("i2d.eam.pmnotification.create.s1.ZEAM_NTF_CRES1_EXT.Component", {
metadata: {
manifest: "json",
config: {
"sap.ca.i18Nconfigs": {
bundleName: "i2d.eam.pmnotification.create.s1.ZEAM_NTF_CRES1_EXT.i18n.i18n"
}
}
}
});
but the text still does not get translated.
The content of the i18n.properties file:
ext.createNotification=Create notification
ext.createOrder=Create order
and Buttons, that are using the translation:
<Button press="onCreateWithOrder" text="{i18n>ext.createOrder}" />
<Button press="onSave" text="{i18n>ext.createNotification}"/>
What am I doing wrong?
I only used "sap.ca.i18Nconfigs"with success when translating apps using the old fashion "scaffolding" namespace (sap.ca.scfld).
I would bet that the app you are extending is not based on it.
Then, try to add the following calls to your Component.js file
init: function() {
UIComponent.prototype.init.apply(this, arguments);
var oModel = new sap.ui.model.resource.ResourceModel({
bundleUrl: "../pathToYourParentApp/i18n/i18n.properties"
});
oModel.enhance({
bundleUrl: "i18n/i18n.properties"
});
this.setModel(oModel, "i18n");
sap.ui.getCore().setModel(oModel, "i18n");
}
Also, check the example
https://github.com/fabiopagoti/ui5-extension
Related
I'd like to use form.io in order to allow my admin users to create a new forms but I want save all data into my database, not in form.io platform. Is it possible?
I want use form builder but at save time I want save the form structure into my database.
I don't understand if this option is possible.
Thanks
Yes.
Step 1: Store your components in your database. If you use the form builder, you can get them by a call to builder.schema.
Step 2: Retrieve your components from your database and render the form.
Step 3: Save the data to your DB.
components = {{component string from DB}}
let formio = new Formio.createForm(document.getElementById(element),
components,
{
saveDraft: true,
readOnly: ((readonly) ? readonly : false)
}
).then(function (form) {
if (data) {
var subm = JSON.parse(data)
form.submission = { data: subm };
}
form.on('submit', function (submission) {
//Submission Code
});
form.on('change', function (x) {
//Change Code
})
form.on('error', (errors) => {
//Error Code
})
form.on("render", function () {
//Any Render Overrides?
})
}).catch(function (ex) {
});
Some of this stuff is well documented. Some - not so much. Lots of trial and error. (Mostly error).
Something similar is what works for me. Note this is for saving the schema for the Form Builder. This schema can be deserialized and used as a source for the Form Renderer
#uglyCodeSry
JavaScript
var form;
var formTemplateToSave; // this is the serialized form template to save
window.onload = function() {
var builder = Formio.builder(document.getElementById('builder'), {}, {builder: {}
}).then((_form) => {
form = _form;
form.on('change', function(payload) {
formTemplateToSave = JSON.stringify(form.schema, null, 4);
});
formTemplateToSave = JSON.stringify(form.schema, null, 4);
});
};
HTML
<div>
<div id='builder'></div>
</div>
Don't forget to include the libraries (as well as your usual jquery stuff)
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.form.io/formiojs/formio.full.min.css'>
<script src='https://cdn.form.io/formiojs/formio.full.min.js'></script>
You can then save the formTemplateToSave variable as the JSON to rehydrate your forms
Not Sure if the Documenatation is out of Date, but the standard code for creating a new richtext editor returns
Cannot read property 'RichTextEditor' of undefined
It looks like this is because there is no sap.ui.richtexteditor in the list of included resources.
var oRichTextEditor1 = new sap.ui.richtexteditor.RichTextEditor("myRTE1", {
width:"100%",
height:"300px",
showGroupClipboard:true,
showGroupStructure:true,
showGroupFont:true,
showGroupInsert:true,
showGroupLink:true,
showGroupUndo:true,
tooltip:"My RTE Tooltip"
});
What are my other options for a RichText/WYSIWYG editor in SAPUI5 ?
You should use the sap.ui.define syntax to require the RichTextEditor control in your controller. As the control library is not included in the resources, it would not be readily available.
sap.ui.define([
"com/sap/app/controller/BaseController",
.
.
.
"sap/ui/richtexteditor/RichTextEditor"
], function (BaseController, ........, RichTextEditor) {
onAfterRendering: function () {
var oRichTextEditor1 = new RichTextEditor("myRTE1", {
width:"100%",
height:"300px",
showGroupClipboard:true,
showGroupStructure:true,
showGroupFont:true,
showGroupInsert:true,
showGroupLink:true,
showGroupUndo:true,
tooltip:"My RTE Tooltip"
});
}
});
I am new to JavaScript and OpenUI5.
I was going through the walkthrough demo on the openUi5 website OpenUI5 walkthrough demo
I came through the below code:
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel",
"sap/ui/demo/wt/controller/HelloDialog"
], function(UIComponent, JSONModel, HelloDialog) {
"use strict";
return UIComponent.extend("sap.ui.demo.wt.Component", {
metadata: {
manifest: "json"
},
init: function() {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// set data model
var oData = {
recipient: {
name: "World"
}
};
var oModel = new JSONModel(oData);
this.setModel(oModel);
// set dialog
this._helloDialog = new HelloDialog(this.getRootControl());
},
openHelloDialog: function() {
this._helloDialog.open();
}
});
});
I have doubt in the line this._helloDialog = new HelloDialog(this.getRootControl());
If _helloDialog is not defined and we are using strict mode, then why does the system not throw message that _helloDialog is undefined?
_helloDialog is a property of this (the controller), and properties do not need to be initialized when creating an object.
"use strict"
var example = {};
example.newProperty = "i am a new property"; //This is absolutely correct
undefinedVariable = 1; // This is going to throw an error
Strict mode prevents you from implicitly creating global variables (as undefinedVariable = 1; would do). But it is not going to prevent adding a property to an object.
If you are interested on preventing the creation of properties, I suggest reading Freeze vs Seal
I have a form like this in a template:
<form {{action 'add' on='submit'}}>
<label for="name">Name</label>
{{input value=name placeholder='Enter name' required="required"}}
</form>
Then I have the following route:
import Ember from 'ember';
export default Ember.Route.extend({
actions: {
add: function() {
alert(this.get('name'));
}
}
});
The alert is fired, but the output is "undefined". I tried to create a model in the route, but it didn't help. What am I missing to get the alert to show the string I type in the form? I don't want to use a controller, since controllers are discouraged.
1. About Controllers
If you do not like to use controllers this would work for you (but I do not recommend you to follow this way):
export default Ember.Route.extend({
actions: {
add: function() {
alert(this.controllerFor( this.get('routeName') ).get('name'));
}
}
});
In fact, if you use name in template:
{{input value=name}}
you are actually using controller property name.
So there is suggestion to use triples (route, controller, template) for every route, and in future triples could be transformed to routing components. You could read about it here:
https://gist.github.com/samselikoff/1d7300ce59d216fdaf97
2. Data communication
I'd suggest you to use model for data communication. You could define model hook in route:
// route
export default Ember.Route.extend({
model: function() {
// your logic here, for example
// return Ember.Object.create({name: 'DefaultName'});
// or
// return this.store.createRecord('yourModel', {name: 'DefaultName'});
}
});
then you'll have model property in controller, you could use it in template
// template
<form {{action 'add' on='submit'}}>
<label for="name">Name</label>
{{input value=model.name placeholder='Enter name' required="required"}}
</form>
then you could place your action in controller:
// controller
export default Ember.Controller.extend({
action: {
add: function() {
// whatever you'd like to do with model, for example
// alert( this.get('model.name') );
// or
// var self = this;
// this.get('model').save().then(function() {
// self.transitionToRoute('someRoute');
// });
}
}
});
You could also place action in route, but then you have to write:
this.modelFor('yourRouteName') to get model,
this.controllerFor('yourRouteName').get('someProperty') to get controller property someProperty.
I'm not sure what is a "correct way", but this might help: this.controller.get('name')
I am trying to use KoGrid in a HTML view within the HotTowel SPA template. I created a simple view:
<section>
<h2 class="page-title" data-bind="text: title"></h2>
<div class="gridStyle" data-bind="koGrid: gridOptions"></div>
</section>
and added the model data in the JS:
define(['services/logger'], function (logger) {
var vm = {
activate: activate,
title: 'My Grid'
};
return vm;
//#region Internal Methods
function activate() {
var self = this;
this.myData = ko.observableArray([{ name: "Moroni", age: 50 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 }]);
this.gridOptions = { data: self.myData };
return true;
}
//#endregion
});
The grid is on the page, but the styling seems to be rendering widths and positions completely wrong so that columns are on top of each other and most data is not visibly correct. The KoGrid.css file is being referenced correctly.
Thanks for any help.
The core of the problem is that "when KOGrid does its binding in Durandal/HotTowel, the KOGrid element is not yet part of the DOM". You need to ensure that KOGrid does not do its binding until after the view is attached. This can be achieved as follows:
1) Add a new observable to the viewmodel to hold a boolean value for whether the view has been attached or not by durandal:
isAttachedToView = ko.observable(false)
and expose it
isAttachedToView: isAttachedToView
2) Up date it to be true when the viewAttached function callback is invoked:
function viewAttached() {
isAttachedToView(true);
return true;
}
3) Surround your HTML with a ko if statement to ensure that bit of HTML is not evaluated (i.e. kogrid does not do its binding) until after the view is attached:
<!-- ko if: isAttachedToView() -->
<div data-bind="koGrid: { data: ...
<!-- /ko -->
4) Reset isAttachedToView to be false on deactivating view
function deactivate() {
isAttachedToView(false);
}
And expose this:
deactivate: deactivate
You have probably already figured this one out but was also faced with the same problem today. A quick look at the chrome inspector told me that koGrid dimensional properties have not registered correctly and this tells me its a timing issue. I found an answered question relating to the same problem here.
I did try this solution but there is still some work to do to make it play ball nicely. I have decided to give koGrid a miss since I don't really want all it's functionality anywayz :)