We Keep Coding

List of icons and their names in iron-icons

In Polymers, to display icons on our page we can use the following
<paper-icon-button icon="delete"></paper-icon-button>
The icon comes from iron-icons.
Now, in example, I am using delete icon to show trash-bin icon.
Is there is any documentation where I can see the icons list and their names used?
for example:
Trash bin = 'delete'
I went through the below link, but couldn't found out what I was looking for https://www.webcomponents.org/element/PolymerElements/iron-icons

There is a "Demo" link on the left.
Here is a direct link to it:
https://www.webcomponents.org/element/PolymerElements/iron-icons/demo/demo/index.html

There is a searchable list of iron-icons now available at this URL:
Searchable Iron Icons List

It will load an entire icon set even if you only use one of its icons in your application. You can generate your own Iconset from the list provided here and use only the icons your application needs.

I think this is for you. A demo page with all actual iron-icons set: https://elements.polymer-project.org/bower_components/iron-icons/demo/index.html

nicEditor add/remove icons using jquery

I have tried to add a rich text editor to my application. I'm using nicEdit.
bkLib.onDomLoaded(function() {
nicEditors.editors.push(new nicEditor().panelInstance(document.getElementById('single_answer_description')));
});
I added this part to convert my normal textarea to a richtext editor. It looks fine:
What I want to do now is to only show some of the icons like B, I, U. I don't want all the icons. How can I hide those? I also want to set font family by default inside the rich text editor content.
I tried to search so many links but I couldn't get any proper solution for this issue. Please help me to get out of this issue. Thanks in advance.

As per the documentation
You can add an array of the buttons you want when you instantiate the object.
bkLib.onDomLoaded(function() {
nicEditors.editors.push(
new nicEditor({buttonList:['bold','italic']}).panelInstance(document.getElementById('single_answer_description')));
});

Can we use an icon in ACE editor's autocomplete

I know that I can add an autocomplete list in ACE editor as below
completions.push({ name:"testing1", value:"testing1", meta: "code1" });
completions.push({ name:"testing2", value:"testing2", meta: "code2" });
My requirement is to add an icon adjacent to "code1" in the autocomplete popup. I tried to use <img> in meta value but it didn't work. I saw the ace's source code but didn't see a way to implement it.
Has anyone done this before?
Update:
I did it myself and added details in the answer below

Using an <img> tag in the meta text won't work because it isn't interpreted as HTML.
If you can include additional information in your autocomplete objects, you could:
completions.push({ name:"testing1", value:"testing1", meta: "code1", icon: "code1.png" });
From there, you could find the code that creates the autocomplete popup and add a conditional if statement that optionally adds an <img> tag.

I found a way to do it through css.
Added className property to the completion object
completions.push({ name:"test", value:"test", meta: "test", className:"iconable"});
And added icon in css:
.ace_iconable:after
{
content: " \f14c"; /* in my case it is font-awesome icon*/
font-family: FontAwesome;
}

Ace.Tern extension supports using an iconClass property in autocomplete extension. See it on github
However this is not something currently in Ace editor. I would say if you need to support just static styles, using className property (see it on github) and using before pseudo class to load them. In my case I need to do some post processing of the items in autocomplete popups, hence I need to listen to the 'afterRender' events like this one so that I can dynamically inject my icons in it.

Multiple custom plugins in TouchUI RTE in AEM not working

I tried adding two custom plugins in TouchUI RTE (Image plugin and colorpicker plugin ). if I add either of the one plugin's to RTE, that works fine but when having both together, only color picker plugin appears.
Plugin links:
http://experience-aem.blogspot.com/2015/01/aem-6-sp1-touchui-richtext-editor-color-picker-plugin.html
http://experience-aem.blogspot.com/2015/09/aem-61-touch-ui-rich-text-editor-rte-browse-insert-image.html
I need both the plugins in RTE, Could you please suggest an appropriate approach?

The components don't work together because components are overriding one to another: CUI.rte.ui.ToolkitRegistry.register("cui", ExperienceAEM.ToolkitImpl);
To achieve what you want:
Remove the custom EAEMCuiToolbarBuilder and EAEMDialogManager classes, instead extending CUI.rte.ui.cui.CuiToolbarBuilder and CUI.rte.ui.cui.CuiDialogManager directly e.g. CUI.rte.ui.cui.CuiDialogManager = new Class({ extend: CUI.rte.ui.cui.CuiDialogManager, ... });
Remove the EAEMToolkitImpl class and the line CUI.rte.ui.ToolkitRegistry.register("cui", EAEMToolkitImpl); as it seems no longer necessary
Place the colorpicker and image insert plugins into different GROUP names, so that they dont collide when CUI.rte.plugins.PluginRegistry.register(GROUP, EAEMColorPickerPlugin); is called.
Change calls of this.superClass._getUISettings(options) and this.superClass.create.call(this, dialogId, config) to this.inherited(arguments)
Reference: http://experience-aem.blogspot.com.uy/2015/09/aem-61-touch-ui-rich-text-editor-rte-browse-insert-image.html

sharepoint 2010. Include javascript in code for all item display forms

I have javascript which can hide empty fields from sharepoint display form.
http://sharepointjavascript.wordpress.com/2009/10/15/hide-empty-rows-in-dispform/
I need to add programmatically this javascript to all display forms.
I dont know how to do it. Any ideas?

.each loops through all elements which matches a specific selector. If the code below is not sufficient, change the selector ("td.ms-formbody") such that your desired elements are matched.
$("td.ms-formbody").each(function(){ /* Should walk through all elements */
var val = $(this).text().replace(/\s|\xA0/g,'');
if($(this).parents().html().match('FieldName="#H#')==null){
if(val.length==0){
$(this).parents('tr:first').hide();
}
}
});
If you're still stuck, provide your HTML code, so that a more specific answer can be offered.

You can add a custom template file, overriding the ordinary DefaultTemplates.ascx (under ControlTemplates).
Create _NewTemplates.ascx file (empty). It should go under ControlTemplates as well
Copy all the Register stuff from the original ASCX
Add the ListForm template copied from DefaultTemplates.ascx (you might need to add a couple more template, depending on the list types you want to support)
Now edit the rendering template to add your JS
<SharePoint:RenderingTemplate ID="ListForm" runat="server"">
<Template>
--> add your code here
<script language="javascript">add functions or hook up enternal JS file</script>
--> continue original markup from this point
Save the file and run IISRESET, that's it