How to fix the AppManifest.xml Designer can not be launched in Visual Studio 2015?

I got a bunch of update with visual studio in my development machine, and I try to open AppManifest.xml in designer mode. But nothing happen.

I need to close the visual studio 2015 and go the appData of Visual Studio 2015, then clear the Cache of ComponentModelCache

C:\Users\(MyUserName)\AppData\Local\Microsoft\VisualStudio\14.0\ComponentModelCache

then reopen the project. the AppManifest.xml can be viewed in Designer Mode.

Happy Programming.

How to limited number of Rows in return in Data Loading with SharePoint CSOM?

when we load list item from a large document library, the process will hang due to large volumn of items.

it is quite easy to improve the performance to limited the number of rows return from the query. we just need to set the ViewXml property from teh CamlQuery object.

limitedQuery.ViewXml = "<View><RowLimit>50</RowLimit></View>";


 class Program
    {
        static void Main(string[] args)
        {

            string siteUrl = "http://SharepointSever";

            SP.ClientContext clientContext = new SP.ClientContext(siteUrl);

            SP.List oList = clientContext.Web.Lists.GetByTitle("My Documents");
            SP.CamlQuery limitedQuery = new SP.CamlQuery();
            limitedQuery.ViewXml = "<View><RowLimit>50</RowLimit></View>";

            SP.ListItemCollection collListItem = oList.GetItems(limitedQuery);

            clientContext.Load(collListItem);

            clientContext.ExecuteQuery();

            foreach (SP.ListItem oListItem in collListItem)
            {
                Console.WriteLine("ID: {0} \nTitle: {1}", oListItem.Id, oListItem["Title"]);
            }
            Console.ReadLine();

        }
    }

How to localize the web part title in Sharepoint Page using Javascript from Client Side?

I had create a post on how to create a web part page with tab navigation. you can find it here

How to create a SharePoint page to support Tab navigation within the Web Part page with JQuery Tabs Widget?

 since this page only have english version only, and I did not have control over the resource. then i will be able to run any powershell script and create any resource file to setup the localization on the server side.

but there is still a way to work aroud for it. I will show you how to use the javascript to translate those web part title and tab header.

1. use Inspect Element from IE Popup Menu to load DOM explorer,  to find web part ID or web 
part title ID.



2. setup an array to host those translation.

var localizedStrings={
        WebPartCaptionWPQ2:{
            '1033':'Content Webpart One',
            '1036':'Content Webpart One French'
        },
        WebPartCaptionWPQ3:{
            '1033':'Content Webpart two',
            '1036':'Content Webpart two French'
        },
        SalesDashboard:{
            '1033':'Sales Dashboard',
            '1036':'Sales Dashboard French'
        },
          SalesReport:{
            '1033':'Sales Report',
            '1036':'Sales Report French'
        }
    }


3. implement a document.ready event to handle finding those control and replace text with language specific words.

the first two lines will help to identify the web part control title by web part ID. that i had commented out. the next two line will directly use the WebPartWP_ChromeTitle to find the control and replace its text with language specific translation.


 $(document).ready(function () {
    if (g_wsaLCID == 1036) {
                // $("#WebPartCaptionWPQ2").prev().text(localizedStrings['WebPartCaptionWPQ2'][g_wsaLCID]);
                // $("#WebPartCaptionWPQ3").prev().text(localizedStrings['WebPartCaptionWPQ3'][g_wsaLCID]);
                $('a[href="#Sales-Dasboard"]').text(localizedStrings['SalesDashboard'][g_wsaLCID]);
                $('a[href="#Sales-Report"]').text(localizedStrings['SalesReport'][g_wsaLCID]);
                $("#WebPartWPQ2_ChromeTitle").text(localizedStrings['WebPartCaptionWPQ2'][g_wsaLCID]);
                $("#WebPartWPQ3_ChromeTitle").text(localizedStrings['WebPartCaptionWPQ3'][g_wsaLCID]);
            }
 });


4. Create a javascript file name LocalizeJS.js to save all the codes from above.

5. upload the files to shaepoint library.

6. add a script editor web part to the sharepoint web part page.

then I have my french version page after i change my IE browser setting to French.

How to quickly parse XML string into a object list with System.XML.linq in C#?

Today i discover that it is much neat and fast to parse an XML String into Object list when I utilized the System.XML.Linq.

here is the code to demostrate this, you can create a console app to see how it works.

class Program
    {
        static void Main(string[] args)
        {
            string xmlString = @"<FCDetail><FCDetail><FC> ZRL - 02 </FC><FCDesc> FC Description </FCDesc>
                <FGC> FAC </FGC><FGroup> Accessories </FGroup></FCDetail></FCDetail><FCDetailMessage></FCDetailMessage>";
            string xml = "<FCRoot>" + xmlString + "</FCRoot>";
            var xDoc = XDocument.Parse(xml);

            var listNode = xDoc.Root.Elements("FCDetail").FirstOrDefault();

            List<FCodeModel> list = new List<FCodeModel>();
            foreach (var fCodeElement in listNode.Elements("FCDetail"))
            {
                list.Add(new FCodeModel
                {
                    FC =fCodeElement.Elements("FC").Select(e => e.Value).FirstOrDefault() ?? "",
                    FCDesc =fCodeElement.Elements("FCDesc").Select(e => e.Value).FirstOrDefault() ?? "",
                    FGC =fCodeElement.Elements("FGC").Select(e => e.Value).FirstOrDefault() ?? "",
                    FGroup =fCodeElement.Elements("FGroup").Select(e => e.Value).FirstOrDefault() ?? ""
                });
            }
           
    }

    public class FCodeModel
    {
        [JsonProperty("fCode")]
        public string FC { get; set; }
        [JsonProperty("fCodeDesc")]
        public string FCDesc { get; set; }
        [JsonProperty("fGroupCode")]
        public string FGC { get; set; }
        [JsonProperty("FGroup")]
        public string FGroup { get; set; }
    }

How to create a SharePoint page to support Tab navigation within the Web Part page with JQuery Tabs Widget?

It is a very easy to have a tabs sections enable in the page with Jquery tab widget. if we need to implement a  tab navigation in the web part page, we can use the JQuery tab widget to accomodate this approach.

It is better to use a pay layout template to customize the web part page, we can use this template to properly put each webpart into different web part zone. we then can use this page layout template to create the new page.

We can use the following step to complete this task.

1. go to Master Page Library by selecting the site setting from Settings icon on the top right corn.





2. click on the Master Page And The Page Layout to access the Master Page Library


3. download a copy of welcomePageLayout.aspx


 4. Rename the Welcome Layout Page to TabPage.aspx

5. Open the TabPage.aspx with Visual Studio Code. and paste the following code after the Library Registration Section. Which will add javascript file reference and enable Tab in the Document.ready event.


<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
   
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>" runat="server"/>
<!-- Reference the jQueryUI theme's stylesheet on the Google CDN. Here we're using the "Start" theme -->
    <link  type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css" />
    <!-- Reference jQuery on the Google CDN -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <!-- Reference jQueryUI on the Google CDN -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <style type="text/css">
        .ms-bodyareaframe
        {
            padding: 0px;
        }

        #tabs {
                    background: none;
                    border: none;
                }
                #tabs .ui-widget-header {
                    height: 40px;
                    background: none;
                    border: none;
                    -moz-border-radius: 0px;
                    -webkit-border-radius: 0px;
                    border-radius: 0px;
                }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#tabs").tabs();

        });
    </script>
    <PublishingWebControls:EditModePanel runat="server">
        <!-- Styles for edit mode only-->
        <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/editmode15.css %>"
            After="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>" runat="server"/>
    </PublishingWebControls:EditModePanel>
</asp:Content>

6.  put this snippet of code in the Main PlaceHolder to get the Web Part Zone Layout Configuration in place.

<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
    <div class="">
        <!--<PublishingWebControls:EditModePanel runat="server" CssClass="edit-mode-panel title-edit">
            <SharePoint:TextField runat="server" FieldName="Title"/>
        </PublishingWebControls:EditModePanel>    -->
            <div id="tabs">
            <ul>
                <li><a href="#Sales-Dasboard">Sales Dasboard</a></li>
                <li><a href="#Sales-Report">Sales Report</a></li>
            </ul>
            <div id="Sales-Dasboard">
            <div class="ms-table ms-fullWidth">
            <div class="tableCol-100">
                <div class="cell-margin">
                    <WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_Header%>" ID="Header"/>
                </div>
                <div class="ms-table ms-fullWidth">
                    <div class="cell-margin" style="width:49.9%;display: table-cell;">
                        <WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_CenterLeft%>" ID="CenterLeftColumn1" />
                    </div>
                    <div class="cell-margin" style="width:1%;display: table-cell;">
                        &nbsp;
                    </div>
                    <div class="cell-margin" style="width:48.9%;display: table-cell;">
                        <WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_CenterRight%>" ID="CenterRightColumn1" />
                    </div>
                </div>
                <div class="cell-margin">
                    <WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_Center%>" ID="Middle1"/>
                </div>
                <div class="cell-margin">
                    <WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_Center%>" ID="Middle2"/>
                </div>
                <div class="ms-table ms-fullWidth">
                    <div class="cell-margin" style="width:49.9%;display: table-cell;">
                        <WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_CenterLeft%>" ID="CenterLeftColumn2" />
                    </div>
                    <div class="cell-margin" style="width:1%;display: table-cell;">
                        &nbsp;
                    </div>
                    <div class="cell-margin" style="width:48.9%;display: table-cell;">
                        <WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_CenterRight%>" ID="CenterRightColumn2" />
                    </div>
                </div>
                <div class="cell-margin">
                    <WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_Footer%>" ID="Footer"/>
                </div>
            </div>
            <SharePoint:ScriptBlock runat="server">if(typeof(MSOLayout_MakeInvisibleIfEmpty) == "function") {MSOLayout_MakeInvisibleIfEmpty();}</SharePoint:ScriptBlock>
        </div>
            </div>
            <div id="Sales-Report">
                <WebPartPages:WebPartZone runat="server" Title="loc:CaseStudies" ID="CaseStudies" FrameType="TitleBarOnly"><ZoneTemplate>
                </ZoneTemplate></WebPartPages:WebPartZone>
            </div>
            </div>
    </div>
</asp:Content>

7. Upload the tabPage.aspx to the Master Page Library.

•      Selected Page Layout from Content Type section dropdown list
•      Selected Page Layout Content Type from Content Type Group Dropdown list
•      Select Welcome Page from Content Type Name dropdown List.

8. Go to Page library and Create a new page by Selecting
TabPage.aspx  from the list box under Page Layout section.




9. when you click your newly created page. you will see your tab like this

Tab One Web Part Zone Layout



Tab Two Web Part Zone Layout