0

I'm trying to do a simple UI-Bootstrap accordion in a SharePoint 2013 page.

This is the markup page:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyPage.ascx.cs" Inherits="MyProject.CONTROLTEMPLATES.MyProject.MyPage" %>

<link href="../../../_layouts/15/MyProject/Styles/StyleSheet.css" rel="stylesheet" />
<link href="../../../_layouts/15/MyProject/Styles/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="../../../_layouts/15/MyProject/Styles/angularjs/angular-flash.css" rel="stylesheet" />
<link href="../../../_layouts/15/MyProject/Styles/angularjs/ngDialog.css" rel="stylesheet" />

<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular-animate.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular-route.min.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/ng-table.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular-sh-checkbox.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular-flash.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular-mask.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/ngDialog.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/bootstrap/ui-bootstrap-tpls-0.14.2.min.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angularCommonModule.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/MyPALRequests.js" Localizable="False" OnDemand="False" />

<div ng-app="myApp">  
    <div id="main" ng-controller="myController">

        <uib-accordion close-others="true">
            <uib-accordion-group heading="Static Header 1, initially expanded" is-open="true">
                This content 1 is straight in the template.
            </uib-accordion-group>
            <uib-accordion-group heading="Static Header 2">
                This content 2 is straight in the template.
            </uib-accordion-group>
        </uib-accordion>
    </div>
</div>

I also included ui.bootstrap module:

var myApp = angular.module('myApp', [ '...', '...', '...', 'ui.bootstrap']);

The result is only a text like This content 1 is straight in the template. This content 2 is straight in the template. without accordion.

I made this plunker that works perfectly so I found that if I delete the ui-bootstrap-tpls-0.14.2.js script I get same behavior of my SharePoint page. The ui-bootstrap-tpls-0.14.2.js script has some problem to load? I don't get any error in developer tools console.

In another view of this page I also use UI-Bootstrap radio button and it works.

Thank you

0

I found the issue: AngularJS and AngularAnimateJS have different version. Get both at the same version and it works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.