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 }); }