0

I am requesting your assistance. i am still learning SharePoint development in version 2013. I would like to know how to create small sharepoint webparts to display content or to display links pointing to other pages?

Thank you.

  • A simple Google search of create webpart in sharepoint 2013 would return you a lot of helpful articles. In addition to that MSDN has lot of resources dedicated to it like this one - Walkthrough: Creating a Web Part for SharePoint – Naveen Aug 7 '15 at 9:24
  • If you are more precise in your question, it will help to get your answer fast – Unnie Aug 7 '15 at 9:55
0

Creating a web part is very easy you can find tutorial on googling, if you need to show list contents in your page putting little effort follow the steps here-->

  1. Copy and paste the below script in your notepad change the --List Name, view Name(by default 'All Items'), Column names.
  2. Save this script as .txt file and upload it in your SharePoint document Library.
  3. Copy the path of this file.
  4. Open page where you want to display contents.
  5. Click edit page link and then on Add Web Part link.
  6. Select Media and Content --> Select Content Editor Web part.
  7. Edit the web part--paste your file path here.

Now you will be able to view your content in your page, as you save and publish the page.

Here is the code:

HTML:

<span style='margin-left:5px;'>Events And Announcements</span>
<div style='width:98%; float:left;margin-top:10px;margin-bottom:50px;'>

    <ul class="event-list" id="Announcements">

    </ul>

</div>

CSS:

.event-list {
    margin: 0;
    padding: 0;
}

.event-list li {
    list-style: none;
    float: left;
    border-left: solid 8px #efefef;
    width: 95%;
    position: relative;
    height: 56px;
    box-shadow: 0px 1px #e0e0e0;
    cursor: pointer;
}

.event-list li:hover {
    border-left: solid 8px #0d9dd2;
}

.column-listview {
    float: left;
    padding-left: 10px;
}

.event-list li h5 {
    color: #595b5a;
    font-size: 16px;
    margin: 0;
    padding: 0;
    float: left;
    padding-top: 10px;
}

.event-list li h6 {
    color: #a3a3a3;
    font-size: 12px;
    float: left;
    margin: 0;
    padding-top: 10px;
    padding: 0;
    clear: left;
}

.calendar-list {
    float: right;
    width: 67px;
    height: 100%;
    position: absolute;
    right: 0;
    background-color: #e7e7e7;
    text-align: center;
    line-height: 24px;
}

.calendar-list-date {
    font-size: 12px;
    color: #a3a3a3;
}

.calendar-list-time {
    font-size: 15px;
    color: #a3a3a3;
}

.event-list li:hover .calendar-list {
    background-color: #0d9dd2;
}

.event-list li:hover .calendar-list-date {
    color: #fff;
}

.event-list li:hover .calendar-list-time {
    color: #fff;
}

ul.event-list>li:first-child {
    border-top: 1px solid #efefef!important;
}

ul.event-list>li {
    border-right: 1px solid #efefef!important;
    width: 100%!important;
    min-height: 56px!important;
    height: 100%!important;
}

.ms-webpart-chrome-vertical {
    display: block!important;
}

.ms-rtestate-field p,
p.ms-rteElement-P {
    margin: 0px 0px 0px 0px!important;
    line-height: 1.6;
}

JS:

<script src='https://code.jquery.com/jquery-2.1.4.min.js' type='text/javascript'></script>
<script src='//cdn.jsdelivr.net/sharepointplus/3.0.10/sharepointplus.min.js' type='text/javascript'></script>
<script language='javascript' type='text/javascript'>    

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getItemsFromView);

function getItemsFromView() {
    var context = new SP.ClientContext.get_current();
    var list = context.get_web().get_lists().getByTitle('ListName');
    var view = list.get_views().getByTitle('All Items');
    context.load(view);

    context.executeQueryAsync(
        function(sender, args) {
            ExecuteMyFunctionOnLoad("<View><Query>" + view.get_viewQuery() + "</Query></View>")
        },
        function(sender, args) {
            alert("error: " + args.get_message());
        }
    );
}    

function ExecuteMyFunctionOnLoad(queryText) {    
    var clientContext = new SP.ClientContext.get_current();    
    var oList = clientContext.get_web().get_lists().getByTitle('ListName');
    var view = oList.get_views().getByTitle("All Items");
    var oWeb = clientContext.get_web();    

    var camlQuery = new SP.CamlQuery();    
    camlQuery.set_viewXml(queryText);    
    this.collListItem = oList.getItems(camlQuery);    
    clientContext.load(collListItem, 'Include(Title, Author, Id)');

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

function onQuerySucceeded(sender, args) {

    var listItemInfo = '';
    var AnnouncementsList = document.getElementById('Announcements');
    var listItemEnumerator = collListItem.getEnumerator();
    var count = 0;
    while (listItemEnumerator.moveNext()) {

        var oListItem = listItemEnumerator.get_current();

        var Start = "";
        var End = "";
        var Author = oListItem.get_item("Author").get_lookupValue(); //.split('#')[1]
        var listItemId = oListItem.get_id();

        var text = oListItem.get_item('Title');
        if (text.length) {
            $("#Announcements").append("<li><span class='column-listview'><h5>" + text + "</h5><h6> By:" + Author + " | Start Date " + Start + " & End Date " + End + " </h6></span></li>");
        }
        count = count + 1;
    }
    if (count == 0) {
        $("#Announcements").append('<li> <span style="margin-left:10px;color: #999 ; width:98%;float:left; line-height: 14px;margin-top: 18px">No records found</span></li>');
    }

}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
| improve this answer | |
0

It is the same as we create user control in ASP.NET. You will get many online tutorial which talk about visual web part.

Try this basic tutorial , it will help you to start

Tutorial link 2

| improve this answer | |
  • Thank you for your response. i need something similar to the webpart on the right "Featured on Meta" on this page. – Siphesakhe Aug 7 '15 at 9:22
  • Yes you can use visual webpart to achieve this. Depending on your requirement you add controls in the ascx files. and follow the tutorial. If you stuck some where let me know. I will try to help you out. – Bhaskar Dhone Aug 7 '15 at 9:29
  • I didnt know that the content editor webpart can actually display content instead, i thought i can only define the path of the file. – Siphesakhe Aug 7 '15 at 9:53
0

What you want to display? If it is just images, formatted text, some links you can use content editor webpart. This is available in sharepoint, you will not need to create it.

Here is more information: Content Editor WebPart

Also there are lots of other web parts which are available out of box in SharePoint which can fulfill your requirement.

| improve this answer | |

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