How to add button to Textview dynamically - sapui5

I have a question here, i need to add some button to the TextView in my tree table header row, the color of Button should be changed according to the line items rows(child nodes) data.
How could that possible? please anyone help me on this.
<TextView id="idKuljkiel" semanticColor="Critical" text="{path:'zstrv_fun>KuljKiel', formatter:'.zchangeColor'}" />
I have created formatter function where i can write some code to create a button, but i am unable to add button to the TextView, and the color of the button should be changed as traffic lights.
For example if childrows have "X" or "" then Yellow,
if childrows have "X" or "X" then Green
if childrows have "" or "" then Red
Can anyone help me on this?

You cannot add a Button or any other control to a TextView. It does not support child controls.
In a formatter you should not modify the view. Its meant to just format a value. It should be idempotent.
The Button control does not support arbitrary colors. It has a style property that lets you change the button to red (reject), green (accept) or gray (default). colors depend on the theme.
Yout can put the TextView together with a Button into a HorizontalLayout. You can then bind the visible property of the Button to your model (and use a formatter if needed).
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons" xmlns:l="sap.ui.layout">
...
<l:HorizontalLayout>
<TextView id="idKuljkiel" semanticColor="Critical" text="{path:'zstrv_fun>KuljKiel', formatter:'.zchangeColor'}" />
<Button visible="{path:'zstrv_fun>WhatEver', formatter:'.zbuttonVisible'}" style="{path:'zstrv_fun>Bla', formatter:'.zbuttonStyle'}"/>
</l:HorizontalLayout>
...
</mvc:View>
Dependig on your data structure inside your model it might be possible to bind to the whole row object and use that in the formatter. Otherwise it could be necessary to process the model data after load to calculate additional properties on the header rows.

Related

How can i change the selection of textfield copy paste options

1)Take Input from Text Field and Input will show on bottom of Text field and Input has multiple Words.
2)Long press on single world It will appear a toast with multiple option opy ,paste ,change color .
3)Click on change color option selected Word should be change color .
4)Click on double click It should be redirect with same words.
Add addition menu item using UIMenuController, something like this:
let changeColor = UIMenuItem(title: "Change Color", action: #selector(changeColor:))
UIMenuController.shared.menuItems = [changeColor]
You can make the changes in changeColor function and update textfield's content from there with your color attributes.
Double-tap is used to show menu controller options, changing that may not be straight forward change. You need to explore swizzling to achieve that.

How to get hex code directly from jscolor?

I'm trying to build a canvas app with color picker using jscolor.
Here are what I've done:
Included the file jscolor.js
Created a button with class="jscolor"
Code for the button:
<button id="strokeCol" class="jscolor {valueElement:'color_value'}" onchange="config.changeStrokeCol(this.jscolor)">
Stroke Color
</button>
When I select a color from the picker I can see the background color of the button changing in developer tool, but in RGB value. Read it somewhere else that I can simply get the HEX by specifying $('element').val(), but in my case it just gives me "" (blank).
The HTML also has no value attribute triggered by the click, not to say being updated. The examples only shows that I can specify a default value (which can't be updated as well).
Have I missed anything? Or has jscolor been updated to provide only RGB value through the background color?
The only workaround I can think of is allowing the HEX code to be displayed inside the button then use .html() to get the value, but it seems so unnecessary.
Problem solved when class is inserted to the
<input> tag. Strange!

How to remove the ZK's default pagination and add a vertical scroll bar instead?

I need to remove the defualt pagination provided by ZK in one of zul page and add a vertical scroll bar instead. How to achieve this?
Perhaps you are refering to a listbox or a grid component, in that case you probably have something like this:
<listbox id="listbox" mold="paging" pageSize="10">
or
<grid id="grid" mold="paging" pageSize="10">
In both cases, the mold property is making that your component do a pagination, and the pageSize property stablish how many item will be show in every page...
If the component does not have the mold property, zk will put a scrollbar by default (but it can give you an unexpected visual behavior)
If you want to replace the pagination with a scrollbar you can put a css property into your component, like this:
<listbox id="listbox" style="overflow:auto">
You can see an example here

change part of the text color in UiBinder

I have a text:
<g:Label ui:field="titleLabel">text RedText someMoreText</g:Label>
Now I'd like to make RedText red. I can't set any widget inside <g:Label> tags, or html elements. But how is this done then?
One way is that you can use <g:InlineLable> inside your <g:Lable> and then style the InlineLable with color Red. Or you can use <span> element with an id/class as per requirement and style it accordingly to red color.

How to set "toggle-spacing" style property to GtkMenuItem in gtk+?

How can I set "toggle-spacing" style property to GtkMenuItem in gtk+?
I have added five GtkImageMenuItem(gtk_image_menu_item_new_with_label) to GtkMenu. Now I want to provide spacing between Image and label of this GtkImageMenuItem.
There is a style property (toggle-spacing) in GtkMenuItem to provide spacing between image and label.
How can I use this property?
I want to give alternate colors to each GtkMenuItem. How it is possible?
Kinda menu I want to create is shown in this image.
(source: flickr.com)
Thanks,
KBalar
Setting Properties.
To make the row colors alternate use gtk_tree_view_set_rules_hint.