Develop Reference

Deactivate buttons in Viber bot after click on it

I render buttons in Viber bot using rich_media message type and Viber REST API.
When user click on a button the buttons are still active and user can click on them once again. Here is an example of this behavior.
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 make these buttons not active or remove from chat. How I can achive that?

Why ng2-tree is showing undefined

I'm using ng2-tree https://angular2-tree.readme.io/v3.2.0/docs/inputs plugin
When i input below json it is showing as undefined
[
{
"value": "helper",
"name": "helper",
"children": []
},
{
"value": "taxi",
"name": "taxi",
"children": []
},
{
"value": "Cake",
"name": "Cake",
"children": [
{
"name": "Chocolate Fudge Cake",
"value": "Chocolate Fudge Cake"
},
{
"name": "Carrot & Walnut Cake",
"value": "Carrot & Walnut Cake"
}
]
}
]
with above json my result is as undefined you can see them in my provided link below
here is the stackblitz link: https://stackblitz.com/edit/angular-ng2-tree-aouyza?file=app/app.component.ts
Please help me thanks in advance!!

Your data structure is wrong. The tree component received as input param a TreeModel and you're having an array of TreeModels at the moment.
Either you adjust your data structure and use a parent TreeModel to wrap your current ones as its children, like following:
tree: TreeModel = {
value: 'Parent Model',
children: [
{
value: 'helper',
name: 'helper',
children: [],
},
{
value: 'taxi',
name: 'taxi',
children: [],
},
{
value: 'Cake',
name: 'Cake',
children: [
{
name: 'Chocolate Fudge Cake',
value: 'Chocolate Fudge Cake',
},
{
name: 'Carrot & Walnut Cake',
value: 'Carrot & Walnut Cake',
},
],
}
]
};
Or you iterate over the array in the HTML and use multiple tree components. That would look like following:
<tree [tree]="t" *ngFor="let t of tree"></tree>
For more information see the Github page of ng2-tree ;)
Update:
You still need to adjust the data model the way I suggested but you can hide the empty root node. To do so, you need to do following:
HTML
<tree [tree]="tree" [settings]="{ rootIsVisible: false }"></tree>
Due to this setting a class rootless is applied which hides the empyt root node but only if you've added node_modules/ng2-tree/styles.css to your angular.json or you've added a custom implementation for that class.
You can find the settings doc here.

Make jsonSource for vtree

I wanted to use JavaScript vtree plugin. For this i made a jsonSource. But i only get first child.
I have multiple class and under a campus have multiple class and so is section. My json is like this
[
{
"campus_id": "4",
"campus_name": "Test Campus Name",
"class_id": "11",
"class_name": "STD - VIII",
"section_id": "11",
"section_name": "A"
},
{
"campus_id": "4",
"campus_name": "Test Campus Name",
"class_id": "15",
"class_name": "A' Level",
"section_id": "15",
"section_name": "A"
},
{
"campus_id": "5",
"campus_name": "Dhanmondi",
"class_id": "6",
"class_name": "STD - III",
"section_id": "6",
"section_name": "A"
}
]
Here is how i made the jsonSource for vtree.
<script type="text/javascript">
var json_data = <?php echo $json_data; ?>;
$.each(json_data, function(key,value){
alert(value.section_id);
var jsonSource = {
tree: {
id: "root",
nodes: [{
id: "master",
title: "Select Campus",
hasChildren: true,
nodes: [{
id: value.campus_id,
title: value.campus_name,
hasChildren: true,
nodes: [{
id: value.class_id,
title: value.class_name,
hasChildren: true,
nodes: [{
id: "section_id",
title: value.section_name,
hasChildren: false,
}]
}]
}]
}]
}
};
//initialisation
var tree = Vtree.create({
// mandatory
container: jQuery("#treeContainer"),
// mandatory
dataSource: jsonSource,
// mandatory
plugins:["checkbox"],
// otional. all parents will be open automatically.
initiallyOpen: ["parent_1", "parent_2", "parent_3"],
// optional. default value is true.
displayCheckbox: true,
// list of initially checked nodes
initiallyChecked: ["child_1"],
//optional. default value is 'checkParents'. Checking a node check all his parents automatically. In this case checking child_1 at initialisation checked all his parents.
checkBehaviour: "checkParents",
// optional. default value is 'checked'
checkedClass: "checked",
//optional. default value is 'uncheckChildren'. Unchecking a node uncheck all his children automatically
uncheckBehaviour: "uncheckChildren",
// a list of disabled nodes
disabledCheckboxes: ["parent_3"],
//optional. by default value is 'disableChildren'. in this case disabling parent_3 will disable automatically his children.
disableBehaviour: "disableChildren",
// optional. default value is "disabled". The class applied to disabled nodes.
disabledClass: "disabled",
});
});
</script>
How can i get all the campus and existing classes and sections as child?

Tree node with expandable property set to true and no children does not render plus icon

Tree node with expandable property set to true and no children does not render the expand/collapse icon.
I need to develop tree control which loads sub-nodes on demand only. In other words, children should be loaded on node expand event. I've found that property 'expandable' set to true is supposed to render expand/collapse icon regardless of whether children exist or not.
Could you please review my code and point out where I made mistake that 'expand/collapse icon' is rendered only for nodes with children.
Tree with store and model declared as follow:
Ext.define('Entity', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'description', type: 'string'},
{name: 'clazz', type: 'string'},
{name: 'path;', type: 'string'},
{name: 'leaf', type: 'boolean'},
{name: 'expandable',type: 'boolean'},
{name: 'allowChildren', type: 'boolean'}
]
});
var mpsStore = Ext.create('Ext.data.TreeStore', {
model: 'Entity',
proxy: {
type: 'ajax',
url: 'companyTree'
}
,root: {
name: '__ROOT__'
}
});
Ext.define('App.view.Navigation', {
extend: 'Ext.tree.Panel',
alias : 'widget.Navigation',
title: '...',
rootVisible: false,
lines: false,
useArrows: true,
store: mpsStore
,columns: [{xtype: 'treecolumn',
text: 'Business Entity',
width: 150,
dataIndex: 'name',
},{ text: 'Description',
dataIndex: 'description'
}
]
});
Response json looks like:
{
"path":".",
"id":"__ROOT__",
"name":"__ROOT__",
"user":null,
"description":null,
"clazz":null,
"iconCls":null,
"leaf":false,
"expanded":true,
"expandable":true,
"allowChildren":true,
"children":[
{
"path":".\\1",
"id":"1",
"name":"Company 1",
"user":null,
"description":null,
"clazz":"companyViewId",
"iconCls":"icon-organisation",
"leaf":false,
"expanded":false,
"expandable":true,
"allowChildren":true,
"children":[ ]
},
{
"path":".\\2",
"id":"2",
"name":"Company 2",
"user":null,
"description":null,
"clazz":"companyViewId",
"iconCls":"icon-organisation",
"leaf":false,
"expanded":false,
"expandable":true,
"allowChildren":true,
"children":[
{
"path":".\\2\\3",
"id":"3",
"name":"billTo 2.1",
"user":null,
"description":"2.1. Street Ave, unit 2.1",
"clazz":"billToViewId",
"iconCls":"icon-billto",
"leaf":false,
"expanded":false,
"expandable":true,
"allowChildren":true,
"children":[
{
"path":".\\2\\3\\4",
"id":"4",
"name":"shipTo 2.1.1",
"user":null,
"description":"2.1. Street Ave, unit 2.1",
"clazz":"shipToViewId",
"iconCls":"icon-shipto",
"leaf":false,
"expanded":false,
"expandable":true,
"allowChildren":true,
"children":[
{
"path":".\\2\\3\\4\\5",
"id":"5",
"name":"machine2.1.1.1",
"user":null,
"description":"manufacturer, model",
"clazz":"machineViewId",
"iconCls":"icon-machine",
"leaf":false,
"expanded":false,
"expandable":true,
"allowChildren":true,
"children":[ ]
}
]
},
{
"path":".\\2\\3\\6",
"id":"6",
"name":"shipTo 2.1.2",
"user":null,
"description":"2.1. Street Ave, unit 2.1",
"clazz":"shipToViewId",
"iconCls":"icon-shipto",
"leaf":false,
"expanded":false,
"expandable":true,
"allowChildren":true,
"children":[ ]
}
]
}
]
},
{
"path":".\\7",
"id":"7",
"name":"Company 3",
"user":null,
"description":null,
"clazz":"companyViewId",
"iconCls":"icon-organisation",
"leaf":false,
"expanded":false,
"expandable":true,
"allowChildren":true,
"children":[ ]
}
]
}
The result looks like
As you can see only one 'company' node has expand/collapse icon.
I've found only one advice for similar question Treepanel expand/collapse on a node without children Extjs
which use css to hack the issue, but have no clue where to insert this style.
Thank you in advance.
Just for those who need 'end of story'.
If you rely on spring and jackson to render json in response and want to skip empty children, you can configure MappingJackson2HttpMessageConverter in yourApp-servlet.xml to do so.
<mvc:annotation-driven>
<mvc:message-converters>
<beans:bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<beans:property name="objectMapper" ref="objectMapper"/>
</beans:bean>
</mvc:message-converters>
</mvc:annotation-driven>
<beans:bean name="objectMapper" class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean" autowire="no">
<beans:property name="dateFormat">
<beans:bean class="java.text.SimpleDateFormat">
<beans:constructor-arg type="java.lang.String" value="yyyy-MM-dd HH:mm:ss"/>
</beans:bean>
</beans:property>
<beans:property name="featuresToDisable">
<beans:list>
<beans:value type="com.fasterxml.jackson.databind.SerializationFeature">WRITE_EMPTY_JSON_ARRAYS</beans:value>
</beans:list>
</beans:property>
</beans:bean>
Regards.

You are providing children data for your nodes, thus ExtJS assume that the node is loaded.
Remove "children":[] for your lazy nodes, and a query will be made to load them on demand.
Then your server must return data for the provided node. For instance if you try to expand node "Company 1", a query should be like :
http://localhost/?node=1
Also if your node doesn't have any children, you should set leaf to true.
As a side note, to reduce the amount of data transiting, many of your parameters (expandable, allowChildren, ...) can use or are the default value, and should be skipped.

jQuery FancyTree, on click expand issue

I'm doing selection tree with help of FancyTree plugin and I'm trying to implement on click event which would work in way when you click on title of select box, all of his subitems and gets expanded in all levels.
To begin with... let me show you the script:
var treeData = [
{title: "item1 with key and tooltip", tooltip: "Look, a tool tip!",
children: [
{title: "Sub-item 3.1",
children: [
{title: "Sub-item 3.1.1", key: "id3.1.1" },
{title: "Sub-item 3.1.2", key: "id3.1.2" }
]
},
{title: "Sub-item 3.2",
children: [
{title: "Sub-item 3.2.1", key: "id3.2.1" },
{title: "Sub-item 3.2.2", key: "id3.2.2" }
]
}
]
},
{title: "item2: selected on init",
children: [
{title: "Sub-item 4.2",
children: [
{title: "Sub-item 4.2.1", key: "id3.1.1" },
{title: "Sub-item 3.2.2", key: "id3.1.2" }
]
},
{title: "Sub-item 3.2",
children: [
{title: "Sub-item 3.2.1", key: "id3.2.1" },
{title: "Sub-item 3.2.2", key: "id3.2.2" }
]
}
] },
];
$(function(){
$(".test").fancytree({
// extensions: ["select"],
checkbox: true,
selectMode: 3,
source: treeData,
select: function(e, data) {
// Get a list of all selected nodes, and convert to a key array:
var selKeys = $.map(data.tree.getSelectedNodes(), function(node){
return node.key;
});
$("#echoSelection3").text(selKeys.join(", "));
// Get a list of all selected TOP nodes
var selRootNodes = data.tree.getSelectedNodes(true);
// ... and convert to a key array:
var selRootKeys = $.map(selRootNodes, function(node){
return node.key;
});
$("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
//$("#echoSelectionRoots3").text(selRootNodes.join(", "));
},
//this is problematic one
click: function(e, data) {
data.node.toggleExpanded();
},
keydown: function(e, data) {
if( e.which === 32 ) {
data.node.toggleSelected();
return false;
}
},
// The following options are only required, if we have more than one tree on one page:
// initId: "treeData",
cookieId: "fancytree-Cb3",
idPrefix: "fancytree-Cb3-"
});
$("#btnToggleExpand").click(function(){
$(".test").fancytree("getRootNode").visit(function(node){
node.toggleExpanded();
});
return false;
});
});
ISSUE
I tried to do so with this part of code:
click: function(e, data) {
data.node.toggleExpanded();
},
But the problem is that it expand subitems of selectbox on select too, and I do not wanna that.
And if you expand one node, and you try to open another one with the help of arrows on left, that second node expands and hides on click to arrow, which is not what I want..
You can see and edit situation in here: http://jsfiddle.net/9vAhZ/
So you migh said I got in some sort of "no way out" siutation and I need help from someone smarter to show me how could I sort this out, which event to use so it does not clashes it with fancytree default behaviour.
Any help or suggestion is welcome.

You check if the click was on select button
click: function(event, data) {
var node = data.node,
tt = $.ui.fancytree.getEventTargetType(event.originalEvent);
if( tt === "checbox" ) {
...
}
},
or implement this in the select event instead of click.

spelling
if(tt = "checkbox"){
...
}