Saturday, 23 February 2013

How add a Promoted links web-part to SharePoint 2013 app default page

This article helps you to add Promoted links web part to your default app page as the following figure:



To do this follow the following steps:
  1. Open the shortcut menu for the project, and then choose Add, New Item
    Add Picture Textbox, and two buttons to infopath form


















  2. In the Templates pane, choose the List template, and then choose the Add button :

  3. Enter list name and choose the Create a non-customizable list based on an existing list type of option button, and then, in its list, choose Promoted links, and then choose the Finish button
    Binding the CAPTCHA image



















  4. In Solution Explorer, under the list instance node, open the Elements.xml file. Add the promoted links items as the following:

     
    <?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
      <ListInstance Title="MyPromotedLinks"
                    OnQuickLaunch="TRUE"
                    TemplateType="170"
                    FeatureId="192efa95-e50c-475e-87ab-361cede5dd7f"
                    Url="Lists/MyPromotedLinks"
                    Description="My List Instance">
        <Data>
          <Rows>
            <Row>
              <Field Name="Title">Twitter</Field>
              <Field Name="BackgroundImageLocation">/PromotedLinksApp/Images/twitter.png</Field>
              <Field Name="Description">Muawiyah Shannak Twitter</Field>
              <Field Name="LinkLocation" >https://twitter.com/MuShannak</Field>
              <Field Name="Order">1</Field>
            </Row>
            <Row>
              <Field Name="Title">Blog</Field>
              <Field Name="BackgroundImageLocation">/PromotedLinksApp/Images/blogger.png</Field>
              <Field Name="Description">Muawiyah Shannak Blog</Field>
              <Field Name="LinkLocation" >http://mushannak.blogspot.com</Field>
              <Field Name="Order">1</Field>
            </Row>
            <Row>
              <Field Name="Title">Linkedin</Field>
              <Field Name="BackgroundImageLocation">/PromotedLinksApp/Images/linkedin.png</Field>
              <Field Name="Description">Muawiyah Shannak Linkedin</Field>
              <Field Name="LinkLocation" >http://ae.linkedin.com/in/shannak</Field>
              <Field Name="Order">1</Field>
            </Row>
          </Rows>
        </Data>
      </ListInstance>
    </Elements>

  5. In Solution Explorer, under the Pages node, open the Default.aspx file. Add following tags inside the PlaceHolderMain Place Holder:


     <WebPartPages:WebPartZone ID="WebPartZone" runat="server" FrameType="None">
                <WebPartPages:XsltListViewWebPart ID="XsltListViewAppPromotedList"
                    runat="server" ListUrl="Lists/MyPromotedLinks" IsIncluded="True"
                    NoDefaultStyle="TRUE" Title="Images used in switcher"
                    PageType="PAGE_NORMALVIEW" Default="False"
                    ViewContentTypeId="0x">
                </WebPartPages:XsltListViewWebPart>
           </WebPartPages:WebPartZone>



  6. Deploy a solution and you will find nice promoted links web part in the app default page!



11 comments:

  1. Awesome post. It would be great to see some instructions on how to host the list inside a web part. Struggling with that somewhat - totally undocumented for SP2013 in Office 365!

    ReplyDelete
  2. To clarify - how would you host the above list within a "Ciient Web Part"?

    ReplyDelete
  3. Hi Richard,

    Sorry for late response, and thanks for your comments.

    Regards to your question about adding web-parts inside app client parts, I think this is doable but need some work. Because when we add web part inside the client part we should add another controls just like SPwebpartmanager and some of script and styles.

    I’ll try to do this and back to you.

    ReplyDelete
  4. Hi Muawiyah,

    Is it possible to add Relative URls as a Linked Location ?

    Thanks

    - Rory

    ReplyDelete
  5. Hi Rory,

    Of course you can by use ~site & ~sitecollection tokens, add these to tokens before your links.

    ReplyDelete
  6. Hi Muawiyah,

    Did you try the relative URLs? If i use the OOTB linked list and try to use ~site, it gives me Invalid URL error

    ReplyDelete
    Replies
    1. I don't think it will work with OOTB, I tested on CAML list schema and it's working

      Delete
  7. I follwed the steps and I get this error microsoft.sharepoint....webpartzone doesnt have a public property called ... XsltListViewWebPart . Any Idea why?

    ReplyDelete
  8. Adding the <WebPartPages:WebPartZone in the placeholder main causes my site page to crash. Have any ideas why? I get the following error:
    Sorry, something went wrong
    Type 'Microsoft.SharePoint.WebPartPages.WebPartZone' does not have a public property named 'XsltListViewWebPart'.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. I figured it out; it worked with the following code:







      The only problem I now have is that the list view instead of the tile view shows up.

      Delete