How to add Two java script file in element .xml

Question

I am using 2 button in custom tab and each button has a .js file to load . Could you please say me how to use 2 .js file in the same element .xml and here is my code for element xml

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Id="CustomTab"
        Location="CommandUI.Ribbon.ListView"
        RegistrationId="101"
        RegistrationType="List">
        <CommandUIExtension>
            <CommandUIDefinitions>
                <CommandUIDefinition
                    Location="Ribbon.Tabs._children">
                    <Tab
                        Id="Ribbon.CustomTab"
                        Title="CustomTab"
                        Sequence="501">
                        <Scaling
                            Id="Ribbon.CustomTab.Scaling">
                            <MaxSize
                                Id="Ribbon.CustomTab.MaxSize"
                                GroupId="Ribbon.CustomTab.CustomTabGroup"
                                Size="FiveLarge"/>
                            <Scale
                                Id="Ribbon.CustomTab.Scaling.CustomTabScaling"
                                GroupId="Ribbon.CustomTab.CustomTabGroup"
                                Size="FiveLarge" />
                        </Scaling>
                        <Groups Id="Ribbon.CustomTab.Groups">
                            <Group
                                Id="Ribbon.CustomTab.CustomTabGroup"
                                Title="Excel Groups"
                                Sequence="52"
                                Template="Ribbon.Templates.CustomTabTemplate">
                                <Controls Id="Ribbon.SCustomTab.CustomTabGroup.Controls">
                                    <Button
                                        Id="Ribbon.CustomTab.CustomTabGroup.Button1"
                                        Command="CustomTab.Button1"
                                        Sequence="15"
                                        Image32by32="/_layouts/images/DocumentTab/Button.jpeg"
                                        LabelText="Button"
                                        TemplateAlias="Button"/>
                                    <Button
                                        Id="Ribbon.CustomTab.CustomTabGroup.Button2"
                                        Command="CustomTab.Button2"
                                        Sequence="17"
                                        Image32by32="/_layouts/images/DocumentTab/Button2l.jpeg"
                                        LabelText="Button2"
                                        TemplateAlias="Butt2"/>                
                                </Controls>
                            </Group>
                        </Groups>
                    </Tab>
                </CommandUIDefinition>
                <CommandUIDefinition Location="Ribbon.Templates._children">
                    <GroupTemplate Id="Ribbon.Templates.CustomTemplate">
                        <Layout
                            Title="FiveLarge"
                            LayoutTitle="FiveLarge">
                            <Section Alignment="Top" Type="OneRow">
                                <Row>
                                    <ControlRef DisplayMode="Large" TemplateAlias="Button1" />
                                </Row>
                            </Section>
                            <Section Alignment="Top" Type="OneRow">
                                <Row>
                                    <ControlRef DisplayMode="Large" TemplateAlias="Button2" />
                                </Row>
                            </Section>
                        </Layout>
                    </GroupTemplate>
                </CommandUIDefinition>
            </CommandUIDefinitions>
            <CommandUIHandlers>
                <CommandUIHandler
                    Command="CustomTab.Button1"
                    CommandAction="javascript:Convertion();"
                    EnabledScript="javascript:enable();"/>
                <CommandUIHandler     
                    Command="CustomTab.Button2"
                    CommandAction="javascript:Convertion1();"
                    EnabledScript="javascript:enable();"/>
            </CommandUIHandlers>
        </CommandUIExtension>
    </CustomAction>
    <CustomAction
        Location="ScriptLink"
        ScriptSrc="/_layouts/DocumentTabTwo/Button1.js"/>
    <CustomAction 
        Location="ScriptLink"                 
        ScriptSrc="/_layouts/DocumentTabTwo/Button2.js"/>
</Elements>

Here in the above code the command action attribute of 2 buttons are having method convertion() in button 1.js file . and conversion1() methods in the button 2 .js file . Can any one say me how to add these 2 js file in element.xml? Is the method which I did is correct or any changes to be made?

Answer 1

You can reference an external js file like:

 <CustomAction Id="Ribbon.Library.Actions.Scripts"
 Location ="ScriptLink" ScriptSrc="/_layouts/DocumentTabTwo/Button2.js" />

This will ensure the functions from the file are accessible from your CommandUIHandler