Setting SharePoint 2013 Ribbon Button Click event on XML

Question

I have the below script for adding a formatted <H3> and <p> element into a SharePoint site page in edit mode:

<script type="text/javascript">
$(document).ready(function() {

    $("button[name='addDom']").click(function() {
        var domElement = $('<div><h3>Heading</h3></br><p>Text</p></div>');
        $(this).after(domElement);
    });

});
</script>

on the button click:

<button name="addDom" type="button">Click</button>

May I know how to incorporate this button click into the below XML file, so that when I click on the custom ribbon button, I am able to add the <h3> and <p> element to the site page.

<?xml version="1.0" encoding="utf-8" ?>
<branding xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">    
  <customaction  Name="InsertRibComponentUI" Location="CommandUI.Ribbon" Sequence="30" removeCustomAction="false">
    <commandUIExtension>
        <![CDATA[<CommandUIExtension>
                <CommandUIDefinitions>
                    <CommandUIDefinition Location="Ribbon.EditingTools.CPInsert.Media.Controls._children">
                         <Button
                            Id="Ribbon.EditingTools.CPInsert.Media.RibUI"
                            Command="Ribbon.Command.InsertRibComponentUI"
                            Sequence="30"
                            Image16by16="/_layouts/15/1033/images/formatmap16x16.png?rev=33" Image16by16Left="-164" Image16by16Top="-270"
                            Image32by32="/_layouts/15/1033/images/formatmap32x32.png?rev=33" Image32by32Left="-102" Image32by32Top="-341"
                            Description="Insert Ribbon Button"
                            LabelText="Button"
                            TemplateAlias="o1" />
                    </CommandUIDefinition>
                </CommandUIDefinitions>
                <CommandUIHandlers>
                        <CommandUIHandler
                            Command="Ribbon.Command.InsertRibComponentUI"
                            CommandAction="javascript:alert('Test');"/>
                </CommandUIHandlers>
            </CommandUIExtension>]]>
    </commandUIExtension>
  </customaction>
</branding>

Venkat Konjeti · Accepted Answer · 2017-05-23 21:04:39Z

0

Below is syntax to execute a javascript on clicking button on ribbon

CommandAction="javascript:
          function loadHtml() {
                 var domElement = $('<div><h3>Heading</h3></br><p>Text</p></div>');
                 $(this).after(domElement);
           }
           loadHtml();"

You can read this MSDN article for complete details about custom action button

This is working with SharePoint on-premises. You can also try for SharePoint online.

answered May 23, 2017 at 21:04

Venkat Konjeti

4,9791 gold badge11 silver badges19 bronze badges

@VenkalKonjeti, i gave like the below: <CommandUIHandler Command="Ribbon.Command.InsertRibComponent" CommandAction="javascript: function loadHtml() { var domElement = $('div><h3>Heading</h3></br><p>Text</p></div>'); $(this).after(domElement); } loadHtml();"/> </CommandUIHandlers> But i am getting An unhandled exception with Additional information: '<', hexadecimal value 0x3C, is an invalid attribute character. Line 20, position 42.

Scarlet959
– Scarlet959

2017-05-24 16:03:21 +00:00
Commented May 24, 2017 at 16:03
I think that might be a problem because you have HTML inside the XML. You can keep the javascript function in external JS file and call that function. Refer example here sharemuch.com/2010/03/21/…

Venkat Konjeti
– Venkat Konjeti

2017-05-24 16:09:35 +00:00
Commented May 24, 2017 at 16:09

Add a comment |

Stack Exchange Network

Setting SharePoint 2013 Ribbon Button Click event on XML

1 Answer 1

Your Answer

Hot Network Questions

Setting SharePoint 2013 Ribbon Button Click event on XML

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions