I would like to transfer javascript generated view to an xmlView.
This works great and I can add it to the shell:
var headItem = new sap.ui.unified.ShellHeadItem({
icon: "sap-icon://upload-to-cloud",
id: "network-icon",
customData: [
new sap.ui.core.CustomData({
key: "color",
value: "{= ${appValues>/isOnline} ? 'is-online' : 'is-offline' }",
writeToDom: true
})
]
});
What do I need to do to add this to an XML View:
<u:ShellHeadItem
id="network-icon"
icon="sap-icon://upload-to-cloud"
tooltip="Network status"/>
I tried to add it in the viewController, but it does not update the DOM.
onInit: function() {
var oNetworkIcon = this.getView().byId("network-icon");
oNetworkIcon.setModel(sap.ui.getCore().getModel("appValues"));
oNetworkIcon.addCustomData(new sap.ui.core.CustomData({
key: "color",
value: "{= ${/isOnline} ? 'is-online' : 'is-offline' }",
writeToDom: true
}));
//if you happen to know how to add a class
oNetworkIcon.addStyleClass("blub");
},
Try this:
<u:ShellHeadItem
id="network-icon"
icon="sap-icon://upload-to-cloud"
tooltip="Network status">
<u:customData>
<core:CustomData key="color" value="{= ${/isOnline} ? 'is-online' : 'is-offline' }" writeToDom="true" />
</u:customData>
</u:ShellHeadItem>
I am aware that the OP is asking for a way to write the data into the DOM.
But for those who need to access the extra data of a control through JS only:
This method is more streamlined and easier to read:
<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
xmlns:unified="sap.ui.unified">
<unified:ShellHeadItem id="network-icon"
icon="sap-icon://upload-to-cloud"
tooltip="Network status"
customData:color="{= ${/isOnline} ? 'is-online' : 'is-offline' }" />
</mvc:View>
You can access this extra data like so:
var myData = this.byId("network-icon").data("color");
Documentation: Custom Data - Attaching Data Objects to Controls (See "Use in XML Views").
Related
This is the all projects, and favorite button to show the favorite project only:
This is how I show all project:
<project v-for="(project, index) in projects" :key="project.id" :index="index" :details="project"></project>
This is the button favorite method:
toggleFavorite () {
this.favoriteShown = !this.favoriteShown
this.allProjectShown = !this.allProjectShown
},
I import the project from the other vue file
import project from './project'
And this is the whole favorite method in project.vue
And maybe you need to see the project.vue export default:
So, what should I add in this code to show the favorite projects only
<project v-for="(project, index) in projects" :key="project.id" :index="index" :details="project"></project>
Define a computed property that filters your projects returning just the objects that have a true value for the favorite property.
I'm making some assumptions regarding the structure of your project object, however, the principle will remain the same.
An example of how you could filter results below:
let projects = [
{
id: 1,
favorite: true
},
{
id: 2,
favorite: false
},
{
id: 3,
favorite: false
},
{
id: 4,
favorite: true
}
];
let filteredProjects = projects.filter(p => p.favorite);
Obviously, you're not using a static array as I have in the example so you will need to alter it for your use case (e.g. state.projects.filter(p => p.favorite)). You could also use lodash filter if you're already using that library.
I use FilePond to show previously uploaded images with the load functionality. The files are visible, however I don't get a preview (which I get when uploading a file).
Should it be possible to show previews for files through load?
files: [{
source: " . $profile->profileImage->id . ",
options: {
type: 'local',
}
}],
First you have to install and register File Poster and File Preview plugins and here is the example of how to register it in your code:
import * as FilePond from 'filepond';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
FilePond.registerPlugin(
FilePondPluginImagePreview,
FilePondPluginFilePoster,
);
then You have to set the server.load property to your server endpoint and add a metadata property to your files object which is the link to your image on the server:
const pond = FilePond.create(document.querySelector('file'));
pond.server = {
url: '127.0.0.1:3000/',
process: 'upload-file',
revert: null,
// this is the property you should set in order to render your file using Poster plugin
load: 'get-file/',
restore: null,
fetch: null
};
pond.files = [
{
source: iconId,
options: {
type: 'local',
metadata: {
poster: '127.0.0.1:3000/images/test.jpeg'
}
}
}
];
the source property is the variable you want to send to your end point which in my case I wanted to send to /get-file/{imageDbId}.
In this case it does not matter what your endpoint in the load property returns but my guess is, we have to return a file object.
I am trying to use ag-grid for one of my project work and was trying to configure it with webpack & Angular 1.6
i have configured it as follow
Module
var agGrid = require('ag-grid');
agGrid.initialiseAgGridWithAngular1(angular);
module.exports = angular.module('transModule', ['agGrid'])
.component('transComponent', transComponent)
.name;
Controller
var columnDefs = [
{headerName: "Make", field: "make"},
{headerName: "Model", field: "model"},
{headerName: "Price", field: "price"}
];
var rowData = [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
];
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: rowData
};
html
<div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>
but when i use i, it displays as follow
then i tried adding the stylesheets as follow
require('ag-grid/dist/styles/ag-grid.css');
require('ag-grid/dist/styles/theme-fresh.css');
yet again it the table want render properly and it will show as follow
is there anything um missing?? I would much appreciate if you could give me some headsup??
I noticed in ag-grid's package.json it was referenced main.js as entry point, and I actually found the whole lib folder content loaded in the Source tab of Chrome DevTools.
This was due to the way I was requiring ag-grid:
var agGrid = require('ag-grid');
// get ag-Grid to create an Angular module and register the ag-Grid directive
agGrid.initialiseAgGridWithAngular1(angular);
var myApp = 'myApp';
module.exports = myApp;
angular
.module(myApp, [
'agGrid'
])
Even if the "get-started" docs don't list a Webpack based solution, they do say to include the dist/ag-grid.js file or one of the minified/noStyle versions, so I changed the first line like this:
var agGrid = require('ag-grid/dist/ag-grid.min.js');
today i want to add a new plugin in our CKEDITOR of our PIM System.
Therefore i load the "Link" Plugin from CKEEditor.
First step - i include the plugin to my CKE-Installation under the following path:
ckeditor\js\ckeditor\plugins\link
After that i try to change my "ckeeditor.Config.js"
It looks like the following config:
var CKEDITOR_CONFIGS = (function() {
var module = {};
var configs = {
'default': {
toolbar: [
[ 'Cut','Copy','Paste','PasteText','PasteFromWord','Undo','Redo'],
['NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
['Bold','Italic','Underline','Strike','Subscript','Superscript',
'Source','Save','NewPage','DocProps','Preview', 'Print','-','Templates',
'SpellChecker', 'Find','Replace','-','SelectAll','-','Scayt'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField'],
['RemoveFormat','-','BidiLtr','BidiRtl'],
['PageBreak','Iframe','Styles','Format','Font','FontSize', 'TextColor','BGColor',
'Maximize', 'ShowBlocks','-','About']
]
}
};
module.getConfiguration = function(args) {
return configs['default'];
};
return module;
}());
By reading some posts i found out that i have to add the following code to the config data
config.extraPlugins = 'link';
Can someone tell my wherer i have to add the "config.extraPlugins ='link';
I have already tried out many places in the code, but without any success.
Have someone the same problems? Have i overlooked something?
Thanks in advance
Tim
Directly in your config.js configuration can be. Modify this code:
CKEDITOR.editorConfig = function (config)
You less a parameter, plus this parameter and then configure:
Config.extraPlugins = 'link'
I also have a custom plug-in, is this done.
Hi I have an app that is basically a html page.
I have a problem though as the html page is longer than the viewable screen and the page wont scroll.
Ive added this div:
<div id="scrollerId" style="width:320px; height:100px" x-mojo-element="Scroller">
<div >scrolling content</div>
</div>
but it doesn't do anything.
Please can someone help explain how to add one. or if i need to add anything to my javascript file or anything else ?
source/helloworld.js
enyo.kind({
name: "HelloWorld",
kind: enyo.VFlexBox,
components: [
{kind: "PageHeader", components: [
{content: "Page Header"}
]},
{flex: 1, kind: "Pane", components: [
{flex: 1, kind: "Scroller", components: [
//Insert your components here
]}
]},
{kind: "Toolbar", components: [
]}
]
});
Im a newbie to webos dev so go easy on me.
It might help to know what device(s) you're targeting. You've got a mix of a Mojo app and an Enyo app there, it looks like. Mojo is for the phones. If you're targeting the TouchPad, you should probably switch entirely to Enyo.
For the Mojo scroller to work in webOS you need to enable it as follows:
this.controller.setupWidget("myScroller",
this.attributes = {
},
this.model = {
scrollbars: true,
mode: "free"
});
You can read more about scrollers in Mojo here:
http://webos101.com/Scroller
However, I think you want an Enyo scroller so you get rid of the HTML in your app and use the method described above by XRay Enabler.
It is possible to use JavaScript functions to pull in content from a DIV in your HTML into an Enyo kind. Here's an example using jQuery:
this.$.myContent.setContent($("#someDiv").html());
Keep in mind you'll have to set allowHtml to true to allow HTML content.
First of all welcome to Enyo and webOS! Try to remember that Enyo is your framework that will create the elements of your HTML (the app). You generally do not manipulate it (HTML) directly.
As a simple example, you can create your content after the kind 'HelloWorld' has been rendered:
** your previous code **
{flex: 1, kind: "Scroller", components: [
//Insert your components here
{content: "", name:"myContent"}
]}
]},
{kind: "Toolbar", components: []}
],
create: function() {
this.inherited(arguments);
},
rendered: function() {
this.$.myContent.setContent("I can now add Content!");
}
});
Notice the added content container called myContent in the Scoller. Also, remove the previously created div's in your HTML file.
The content is then added in the rendered function.