Add Dropdown list to custom sharepoint Ribbon TAB via javascript - javascript

I am trying to add a DropDown list to a custom sharepoint ribbon bar tab using javascript, I know that this is not the recommended way and that I should use the declarative approach. I have managed to create Tabs, Groups and add buttons to them, but for some reason createing a dropdown does nothing and gives no errors.
here are the functions that I use to create the tab elements
function CreateCustomTab(tabName, tabTitle, tabGroup, tabToolTip) {
var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
var tab;
if (ribbon !== null) {
tab = new CUI.Tab(ribbon, tabName + ".Tab", tabTitle, tabToolTip, tabName + ".Tab.Command", false, '', null);
ribbon.addChild(tab);
}
return tab
}
function CreateTabGroup(tab, tabName, groupTitle, groupToolTip) {
var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
var group = new CUI.Group(ribbon, tabName + ".Tab.Group", groupTitle, groupToolTip, tabName + ".Group.Command", "test");
tab.addChild(group);
return group;
}
function CreateLayout(group, tabName, LayoutTitle) {
var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
var layout = new CUI.Layout(ribbon, tabName + ".Tab.Layout", LayoutTitle);
group.addChild(layout);
return layout;
}
function CreateDropDownList(tabName, layout, layoutTitle, listName, toolTip, listLabel, ToolTipTitle) {
var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
var section = new CUI.Section(ribbon, tabName + ".Tab.Section", 2, "Top"); //2==One Row
layout.addChild(section);
var controlProperties = new CUI.ControlProperties();
controlProperties.Command = listName + ".DropDown.Command";
controlProperties.Id = listName + ".ControlProperties";
controlProperties.TemplateAlias = "o1";
controlProperties.ToolTipDescription = toolTip;
// controlProperties.Image32by32 = (Image32by32RelativePath ? Image32by32RelativePath : '_layouts/15/images/placeholder32x32.png');
controlProperties.ToolTipTitle = ToolTipTitle;
controlProperties.LabelText = listLabel;
var dropDown = new CUI.Controls.DropDown(ribbon, listName + ".DropDown", controlProperties, ["Test1","Test2","Test3"]);
var controlComponent = dropDown.createComponentForDisplayMode('Large');
var row1 = section.getRow(1);
row1.addChild(controlComponent);
}
function CreateButton(tabName, layout, layoutTitle, buttonName, toolTip, buttonText, ToolTipTitle, Image32by32RelativePath) {
var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
var section = new CUI.Section(ribbon, tabName + ".Tab.Section", 2, "Top"); //2==One Row
layout.addChild(section);
var controlProperties = new CUI.ControlProperties();
controlProperties.Command = buttonName + ".Button.Command";
controlProperties.Id = buttonName + ".ControlProperties";
controlProperties.TemplateAlias = "o1";
controlProperties.ToolTipDescription = toolTip;
controlProperties.Image32by32 = (Image32by32RelativePath ? Image32by32RelativePath : '_layouts/15/images/placeholder32x32.png');
controlProperties.ToolTipTitle = ToolTipTitle;
controlProperties.LabelText = buttonText;
var button = new CUI.Controls.Button(ribbon, buttonName + ".Button", controlProperties);
//var controlComponent = new CUI.ControlComponent(ribbon, buttonName + ".MenuItem.Button", "Large",button)
var controlComponent = button.createComponentForDisplayMode('Large');
var row1 = section.getRow(1);
row1.addChild(controlComponent);
}
and here is how these are called
SP.SOD.executeOrDelayUntilScriptLoaded(function () {
var pm = SP.Ribbon.PageManager.get_instance();
pm.add_ribbonInited(function () {
var tab = CreateCustomTab("SomeTab", "Some Tab", "View Format", "Use this tab");
var group = CreateTabGroup(tab, "SomeTab", "View Format", "Switch between");
var layout = CreateLayout(group, "SomeTab", "SomeTabLayout");
CreateButton("SomeTab", layout, "SomeTabLayout", "ListViewButton", "Switch to list view, this displays a grid with the items ungrouped in an editable table!", "List View", "Table List View");
CreateButton("SomeTab", layout, "SomeTabLayout", "HierarchyButton", "Switch to tree view, this displays a grid with the items grouped in a parent child relationship!", "Tree View","Hierarchy view");
var hierarchyEditGroup = CreateTabGroup(tab, "SomeTab", "Hierarchy Edit", "Edit hierarchy");
var hierarchyLayout = CreateLayout(hierarchyEditGroup, "SomeTab", "HierarchyLayout");
CreateButton("SomeTab", hierarchyLayout, "HierarchyLayout", "EditHierarchyButton", "Edit current hierarchy", "Edit Tree", "Edit current hierarchy");
var ViewsGroup = CreateTabGroup(tab, "ISSQeueuListTab", "Views", "Change data views");
var ViewsLayout = CreateLayout(ViewsGroup, "SomeTab", "ViewsLayOut");
CreateDropDownList("SomeTab", ViewsLayout, "Current View", "DataViewList", "Change the the current view from the available public and private views", "Current View", "View Selection");
group.selectLayout("SomeTabLayout");
hierarchyEditGroup.selectLayout("HierarchyLayout");
SelectRibbonTab("SomeTab.Tab", true);
SelectRibbonTab("Ribbon.Read", true);
$("#Ribbon\\.WebPartPage-title").hide();
var Commands = [];
Commands.push({ name: "SomeTab.Tab.Command", enabled: true, handler: function (a, b, c) { } });
Commands.push({ name: "SomeTab.Group.Command", enabled: true, handler: function (a, b, c) { } });
Commands.push({ name: "DataViewList.DropDown.Command", enabled: true, handler: function () { }});
Commands.push({
name: "HierarchyButton.Button.Command", enabled: true, handler: function (CommandID, properties, seq) {
AppFrame.contentWindow.postMessage("ShowTreeView()", "*");
var Ribbon = SOMESpAppSPPage.get_instance();
var button = Ribbon.GetCommand("EditHierarchyButton.Button.Command");
button.enabled = true;
RefreshCommandUI();
}
});
Commands.push({
name: "ListViewButton.Button.Command", enabled: true, handler: function (CommandID, properties, seq) {
AppFrame.contentWindow.postMessage("ShowListView()", "*")
var Ribbon = SOMESpAppSPPage.get_instance();
var button = Ribbon.GetCommand("EditHierarchyButton.Button.Command");
button.enabled = false;
RefreshCommandUI();
}
});
Commands.push({
name: "EditHierarchyButton.Button.Command", enabled: false, handler: function (CommandID, properties, seq) {
AppFrame.contentWindow.postMessage("ShowHierarchyEdit()", "*");
}
});
SOMESpAppSPPage.initializePageComponent(Commands);
});
var ribbon = null;
try {
ribbon = pm.get_ribbon();
}
catch (e) { }
if (!ribbon) {
if (typeof (_ribbonStartInit) == "function")
_ribbonStartInit(_ribbon.initialTabId, false, null);
}
else {
CreateCustomTab("SomeTab", "SOMESpApp List", "SOMESpAppTabGroup", "Use this tab to intertact with the ISS Queue");
}
}, "sp.ribbon.js");
I had to change some of the names of the variables, but this is exact code I am using. the buttons and tabs work but the Drop down will not any one have an idea.

Change the TemplateAlias for the control in "function CreateDropDownList" from "o1" to "o2" and I speculate this will start working:
controlProperties.TemplateAlias = "o2";

Related

Get active_id in javascript Odoo 10

Hello I'm trying to pass my active_id from my res.partner to the JS.
But no luck.
I tried with dataset active_id but it's always undefined.
and i can't find any solution in the docs.
Here's my JS File:
odoo.define('melax_category.my_dialog_partner', function(require){"user strict";
var core = require('web.core');
var session = require('web.session');
var qweb = core.qweb;
var mixins = core.mixins;
// var Widget = require('web.Widget');
var Model = require('web.Model');
var Dialog = require('web.Dialog');
var model_category = new Model('res.partner');
// var dataset = this.dataset;
// var active_id = dataset.ids[dataset.index];
function ActionBuildTreeBuyerPartner(parent, action){
console.log(this.id)
var dialog = new Dialog(document.body, {
title: "Categories Web Acheteur",
subtitle: '<input id="search-tree-buyer" type="text">',
size: 'big',
$content: '\
<div id="tree-buyer-container"></div>\
',
});
TREE = $('#tree-buyer-container')
dialog.open();
DESTROY_TREE($('#tree-buyer-container'))
BUILD_TREE_PARTNER_MODE(model_category, $('#tree-buyer-container'))
}
function ActionBuildTreeSellerPartner(parent, action){
var dialog = new Dialog(document.body, {
title: "Categories Web Vendeur",
// subtitle: "Tree Builder Partner Sub Title!",
size: 'big',
$content: '<div id="tree-seller-container"></div>',
});
TREE = $('#tree-seller-container')
dialog.open();
// DESTROY_TREE($('#tree-seller-container'))
// BUILD_TREE_PARTNER_MODE(model_category, $('#tree-buyer-container'))
}
core.action_registry.add("build_tree_buyer_partner", ActionBuildTreeBuyerPartner);
core.action_registry.add("build_tree_seller_partner", ActionBuildTreeSellerPartner);
});
and here's my python file where for example i'm trying to pass my active_id(self.id):
#api.multi
def build_tree_buyer_partner(self):
_logger.error(self)
# My active Id
_logger.error(self.id)
return {
'type':'ir.actions.client',
'tag': 'build_tree_buyer_partner'
}
yeah, you can get the current id by using:
var dataset = this.dataset;
var active_id = dataset.ids[dataset.index];
Python
#api.model
def _get_active_id(self):
return self._context.get('active_id')
deploy_config_id = fields.Many2one('res.partner', string='Customer', required=True, default=_get_active_id)

Live update highcharts-gauge from dweet

I would like to have the gauge chart update live dweet data, which is success.
The problem is that every time a new data is pushed to the array humidityData, a new pointer is added in the gauge chart as shown here:
guage chart Though I'd like to have one live-updating-pointer instead.
Could this be done by pop() the prev data?
<script language="JavaScript">
//Array to store sensor data
var humidityData = []
<!--START-->
$(document).ready(function() {
//My Dweet thing's name
var name = 'dweetThingName'
//Humidity chart
var setupSecondChart = function() {
var chart2 = {
type: 'gauge'
};
var title = {...};
var pane = {...};
var yAxis = {...};
var tooltip = {
formatter: function () {
return '<b>' + "Humidity: " + Highcharts.numberFormat(this.y, 2) + "%";
}
};
//Series_Humidity
humiditySeries = [{
name: 'Humidity %',
data: humidityData,
tooltip: {
valueSuffix: '%'
}
}]
//Json_Humidity
var humJson = {};
humJson.chart = chart2;
humJson.title = title;
humJson.tooltip = tooltip;
humJson.xAxis = xAxis;
humJson.yAxis = yAxis;
humJson.legend = legend;
humJson.exporting = exporting;
humJson.series = humiditySeries;
humJson.plotOptions = plotOptions;
console.log("Sereies: : " +humJson)
//Container_Humidity
$('#containerHumidity').highcharts(humJson);
}
var humiditySeries = [] ....
dweetio.get_all_dweets_for(name, function(err, dweets){
for(theDweet in dweets.reverse())
{
var dweet = dweets[theDweet];
//Dweet's variables' names
val2 = dweet.content["Humidity"]
//Add the vals into created arrayDatas
humidityData.push(val2)
console.log("HumidityData: " + humidityData)
}
//Call other charts
setupSecondChart()
});
When you initialize/update your chart make sure that data array contains only one element. The dial is created for every point in this array (to visualize it on the plot).

ExtendScript - Use Arrow Keys to shift focus from searchbox to list

I have the below script:
picked = myItems (['item 1', 'item 2', 'item 3', 'item 4', 'new item 1', 'new item 2']);
function myItems (templates) {
var w = new Window ('dialog {text: "Item List", alignChildren: "fill"}');
var entry = w.add ('edittext {active: true}')
entry.graphics.font= ScriptUI.newFont ("Arial", "Bold", 12);
var list = w.add ('listbox', [0, 0, 200, 100], templates);
list.selection = 0;
list.graphics.font= ScriptUI.newFont ("Arial", "Italic", 14);
entry.onChanging = function ()
{
var temp = entry.text,
tempArray = [];
for (var i = 0; i < templates.length; i++)
if (templates[i].toLowerCase().indexOf (temp) == 0)
tempArray.push (templates[i]);
else if (templates[i].toUpperCase().indexOf (temp) == 0)
tempArray.push (templates[i]);
if (tempArray.length > 0)
{
tempList = w.add ("listbox", list.bounds, tempArray, {scrolling: true});
tempList.graphics.font= ScriptUI.newFont ("Times New Roman", "Regular", 14);
w.remove(list);
list = tempList;
list.selection = 0;
list.onDoubleClick=function(){
if (list.selected){
var buttonname = list.selection.text
var templatefile = new File (searchpath + "/" + buttonname + '.psd');
mainfunction (templatefile)
}
w.close();
}
}
}
ListItem.add
var B = w.add ('button', undefined, 'Ok', {name: 'ok'})
list.onDoubleClick=function(){
if (list.selected){
var buttonname = list.selection.text
var templatefile = new File (searchpath + "/" + buttonname + '.psd');
mainfunction (templatefile)
}
w.close();
}
if (w.show () != 2){
var buttonname = list.selection.text
var templatefile = new File (searchpath + "/" + buttonname + '.psd');
mainfunction (templatefile)
}
w.close();
}
On ExtendScript this creates a search box with a list below. Using the tab key you can switch between the search box and the list. I want to be able to also use the arrow keys to switch between the search box and the list. Can anyone advise if this is possible?
I have seen some results on jQuery, but sadly ExtendScript does not support jQuery, however it does support ScriptUI.
Many Thanks,
EDIT
I found this to be a resolution:
w.addEventListener ("keydown", function (kd) {pressed (kd)});
function pressed (k)
{
if (k.keyIdentifier === "Down" && entry.active = true)
list.active = true;
else if (k.keyIdentifier === "Up" && list.active = true)
entry.active = true ;
else
list.scrolling = true;
}
However, it does not work with Photoshop CC 2014. Does anyone know what I may be able to change to allow backwards compatibility?

Hiding columns and then showing all jumbles up cell values with array datasource

I based my logic on the code suggested here http://jsfiddle.net/LkLkd405/4/
I added 2 new items to the default context menu (code from my helpers module)
addColHideItemsToContextMenu: function(hot, colsToHide, globalColumns, globalHeaders){
var items = hot.contextMenu.defaultOptions.items;
//console.log("items: "+JSON.stringify(items));
//hide_col based on existing remove_col
var hideColItem = {
key: 'hide_col',
name: 'Hide column',
callback: function(key, selection) {
//remove_col code
//var amount = selection.end.col - selection.start.col + 1;
//this.alter("remove_col", selection.start.col, amount);
//hide_col custom code
colsToHide.push(selection.start.col);
var newCols = [];
var newHeaders = [];
for (var i = 0; i < globalHeaders.length; i++) {
if (colsToHide.indexOf(i) === -1) {
newCols.push(globalColumns[i]);
newHeaders.push(globalHeaders[i]);
}
}
hot.updateSettings({
columns: newCols,
colHeaders: newHeaders
});
},
disabled: function() {
var selected = this.getSelected(),
entireRowSelection = [selected[0], 0, selected[0], this.countCols() - 1],
rowSelected = entireRowSelection.join(',') == selected.join(',');
return (selected[1] < 0 || rowSelected);
}
};
items.push(hideColItem);
var showAllColItem = {
key: 'showall_cols',
name: 'Show all columns',
callback: function(key, selection) {
//var amount = selection.end.col - selection.start.col + 1;
//this.alter("remove_col", selection.start.col, amount);
colsToHide = [];
hot.updateSettings({
columns: globalColumns,
colHeaders: globalHeaders
});
},
disabled: function() {
return false;
}
};
items.push(showAllColItem);
},
I then have a server side paging module can receives json objects from the server and converts them to an array of arrays, else new columns cannot be added.
EnhancementPager: function(paramObj) {
var handsontableIntegration = function(rows){// called line 283
paramObj.handsonDataObjects = rows;//received from the server and not used again
paramObj.handsonDataArrays = help.buildArrayFromObjs(rows);
paramObj.globalHeaders = help.extractColHeaders(rows[0]);
paramObj.globalColumns = help.buildArrayDataSourceColumnConfig(paramObj.handsonDataArrays[0]);
paramObj.colsToHide = [];
if(paramObj.table){
var hot = paramObj.table;
hot.updateSettings({
colHeaders: paramObj.globalHeaders,
columns: paramObj.globalColumns
});
help.addColHideItemsToContextMenu(hot, paramObj.colsToHide, paramObj.globalColumns, paramObj.globalHeaders);
hot.loadData(paramObj.handsonDataArrays);
}
}
This is what the grid looks like on load - notice the values on the top row
This is what the top row changes to after hiding the column
Then is I select the show all context item
The top row changes to this
I've only been working with handsontable for a few days, it's a really well written and organised js api. But I'm pretty mystified by this behaviour.

listbox return wrong value in wordpress3.9

I used the listbox UI element in Wordpress 3.8, but it does not work in its newer version (3.9). I wrote this JS code to test it:
(function() {
var ICONS;
var icon = function(id) {
return '<i class="fa fa-' + id + '"></i>';
}
ICONS = ["rub", "ruble", "rouble", "pagelines", "stack-exchange", "arrow-circle-o-right", "arrow-circle-o-left", "caret-square-o-left", "toggle-left", "dot-circle-o", "wheelchair", "vimeo-square", "try", "adjust", "anchor", "archive", "arrows", "arrows-h", "arrows-v", "asterisk", "ban", "bar-chart-o", "barcode", "bars", "beer", "bell", "bell-o", "bolt", "book", "bookmark", "bookmark-o", "briefcase", "bug"]
var menuval=[];
for (var i = 0; i < ICONS.length; i++) {
var _id = ICONS[i];
menuval.push({text: icon( _id )+' '+_id, onclick: function(){setcontentfun(_id)}
});
}
tinymce.PluginManager.add("font_awesome_glyphs", function(editor, url) {
var menucreate=editor.addButton('fontAwesomeGlyphSelect', {
type: 'listbox',
text: 'Icons',
icon: false,
values: menuval
});
});
function setcontentfun(id) {
alert(id);
return false;
}
})();
This created displayed a listbox, but when I click on a menu item instead of alerting the last element of "ICON" array it displays all elements in listbox. How can I alert the list item, which I clicked?
Just did some updates in your code:
var menuval=[];
var insertVar = function (val) {
return function () {
editor.insertContent(val);
}
};
for (var i = 0; i < SHORTCODES.length; i++) {
var _id = SHORTCODES[i];
var _code = SHORTCODE_EXE[i];
var variable = insertVar(_code);
//alert(_id+' '+ SHORTCODES[i]+' '+SHORTCODE_EXE[i]);
menuval.push({text: _id, onclick: variable });
}

Categories