I need to display buttons in Viber bot using rich_media message type and Viber REST API.
When buttons are rendered the Rich Media element has a fixed height (see on screenshot).
If there is five buttons in Rich Media element some empty place appear under the last button.
My source sode for rendering buttons:
var reply = {
type: "raw",
method: "send_message",
body: {
receiver: $request.data.chatId,
sender:{
name: "John McClane",
avatar: "http://avatar.example.com"
},
min_api_version: 2,
type: "rich_media",
rich_media: {
Type: "rich_media",
Buttons: [
{
Rows: 1,
ActionBody: "Option 1",
ActionType: "reply",
Text: "Option 1"
},
{
Rows: 1,
ActionBody: "Option 2",
ActionType: "reply",
Text: "Option 2"
},
{
Rows: 1,
ActionBody: "Option 3",
ActionType: "reply",
Text: "Option 3"
},
...
]
}
}
}
I need to adjust the height of Rich Media element so the element stretches depending on the number of buttons. Is there a way to set height or disable default height of Rich Media element?
Found the solution by myself. There is a parameter called ButtonsGroupRows (rich_media.ButtonsGroupRows, docs on this parameter). 7 is default value.
Related
I am trying to right align the text in Dash Bootstrap Input Select component.
Adding CSS-style: text-align; right does not work (see below):
import dash_bootstrap_components as dbc
select = dbc.Select(
id="select",
options=[
{"label": "Option 1", "value": "1"},
{"label": "Option 2", "value": "2"},
],
style={
'text-align': 'right',
}
)
returning (with text aligned to the left as default). What am I missing?:
I need That the header shows when I export the Chart to Image
My Chart is Like This :
But when I export it to Image it's Without the header
Can any one help me to fix this , Txs, Marwen
AmChart widget allows you to export only widget's content without box header.
You can achieve needed result with AmChart's functionality.
Just set below code as a value to
"Edit... > Widget > Advanced Properties > Extra Options"
:{"allLabels": [
{
"text": "Product Sale",
"size": 32,
"bold": true,
"x": 0,
"y": 0
}]}
UPDATE
If your title overlays the chart you can try to change widget box's height and width along with extending "Extra options" with "marginLeft" and "marginTop" options which allow you to create needed room for chart and it's title:
:{"allLabels": [
{
"text": "Product Sale",
"size": 32,
"bold": true,
"x": 0,
"y": 0
}],
"marginTop":50,
"marginLeft":50}
I need to show a refresh button on a specific card only, the title bar to which is defined in some parent Panel. I have tried in the following way:
Parent Panel:
config:
{
layout : 'fit',
items:[
{
xtype:'titlebar',
docked:'top',
title:'Directory',
items:[
{
xtype: 'button', //First Button-visible in all cards
docked: 'left',
iconCls: 'arrow_left',
action: 'back'
},
{
xtype: 'button', //Target button-to be visible in one card only
docked: 'right',
iconCls: 'refresh',
action: 'reset',
hidden: true //hiding this button
}
]
},
{
xtype:'tabpanel',
tabBarPosition:'top',
items:[
{
title: 'Tab1',
xtype: 'Card1'
},
{
title: 'Tab2',
xtype: 'Card2'
}
]
}
]
}
I have a hidden property set to true for refresh button in above panel, which i want to set false for a card.
The target card is set active on a button click. I am changing hidden property to false in the buttonTapListener, and then setting the target card as active. But the refresh button do not get visible. Here is the controller code:
onButtonTap: function()
{
...
var getParentPanelRef = this.getParentPanel();
var parentPanelItems = getParentPanelRef.getItems();
console.log(parentPanelItems.items[0].config.items[1].hidden); //Prints true
directoryMainContainerItems.items[0].config.items[1].hidden=false;
console.log(parentPanelItems.items[0].config.items[1].hidden); //Prints false
var directorySearchMainUIRef = this.getSomeOtherParentPanel();
directorySearchMainUIRef.setActiveItem(1); //Switches to target card
}
The value of hidden gets changed, but button doesn't come up. Please suggest an alternative if so. Thanks in advance.
Instead of hiding/showing the button you could add/destroy the button.
I had a similar problem a while a ago and it seems that sencha not always detects when it should redraw components.
Maybe your parent component'width is out of you browser and your button is docked right so that you can's see it.
I have a simple button with menu. There is a treepanel inside the menu.
Whenever user selects some node in tree, i update the container buttons text.
In treepanel's afterrender event i make a default node selection in the tree and this fire selection event and the button's text is updated.
However, when the button is rendered for the very first time, the treepanel inside the menu is not yet rendered.
How can i make menu & treepanel render silently (adding to dom but not shown to user until button is clicked) after button is rendered?
Actually there is a workaround which i hesitate to use:
btn.showMenu();
btn.hideMenu();
Any better ideas?
JsFiddle: http://jsfiddle.net/exGk3/
Code:
var selectedNodeIndex = 1;
var onItemSelect = function (selModel, node, index) {
var treePanel = selModel.view.up();
var btn = treePanel.up("button");
btn.setText(node.data.text);
};
var afterTreeRender = function (t) {
t.selModel.select(selectedNodeIndex);
}
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
menu: {
items: {
xtype: "treepanel",
id: "tree",
indent: false,
width: 150,
height: 200,
rootVisible: false,
root: {
children: [{
text: "item 1",
leaf: true
}, {
text: "item 2",
leaf: true
}, {
text: "item 3",
leaf: true
}]
},
listeners: {
select: {
fn: onItemSelect
},
afterrender: {
fn: afterTreeRender
}
}
},
showSeparator: false
}
});
I think the easiest thing to do here is to pass along the text needed for the button. It seems that you already know which node to select in the tree, then you probably know which text corresponds to the selected index.
If that's somehow not possible or API is not changeable here is a way for you to set button text programmatically:
http://jsfiddle.net/dbrin/XSn7X/3/
The changes from what you have done are 2 fold:
Use Ext.define method to define your class with initComponent method.
The initComponet method is a hook after the constructor to setup aditional properties. The key here is that the instance of the class exists at this point and *this* context references the class instance.
Use Ext.create to create an instance of your customized button component.
In the initComponment method you just traverse the tree looking for the data you need and set the button text.
How can I add multiple footer rows to a single Kendo Grid? I need these footer rows to have different totals summaries. Adding an aggregate property to the datasource and a footerTemplate to the column only adds one footer row.
Found a way.
Each column in the grid has a footerTemplate that can be defined with HTML. Using divs, I was able to add mulitple "rows" to the footer row.
$("#mygrid").kendoGrid({
dataSource: data,
columns:[
{
field: "Column 1",
title: "Column 1",
footerTemplate: "#= <div>Totals A</div><div>Totals B</div> #"
},
{
field: "Column 2",
title: "Column 2",
footerTemplate: "#= <div>$1000</div><div>$700</div> #"
}
]