Showing posts with label SharePoint 2013. Show all posts

Monday, December 26, 2022

SharePoint custom html form input autocomplete users

SharePoint expose a lot of API. SP REST API reference and samples

The more you know them it's will be easy develop a lot of features

So in our tutorial we will be use this api "/_api/SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser";

to make ajax call and retrieve list of users by param input

1. first we added a reference to jQuery and jQuery UI library in our page

2. our html form will be look like this

</div>

3. JS – our script looks like this

// user picker auto complete rest api

function searchUsers(request, response) {

var qURL = _spPageContextInfo.siteAbsoluteUrl + "/_api/SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser";

var principalType = this.element[0].getAttribute('principalType');

$.ajax({

'url': qURL,

'method': 'POST',

'data': JSON.stringify({

'queryParams': {

'__metadata': {

'type': 'SP.UI.ApplicationPages.ClientPeoplePickerQueryParameters'

'AllowEmailAddresses': true,

'AllowMultipleEntities': false,

'AllUrlZones': false,

'MaximumEntitySuggestions': 20,

'PrincipalSource': 15,

'PrincipalType': 15,

'QueryString': request.term,

'Required': false

}

}),

'headers': {

'accept': 'application/json;odata=verbose',

'content-type': 'application/json;odata=verbose',

'X-RequestDigest': $("#__REQUESTDIGEST").val()

'success': function (data) {

var d = data;

var results = JSON.parse(data.d.ClientPeoplePickerSearchUser);

if (results.length > 0) {

response($.map(results, function (item) {

// return {label:item.DisplayText,value:item.DisplayText}

return {

label: item.DisplayText,

value: item.Key.replace("i:0#.w|domain\\", "")

}

}));

}

'error': function (err) {

if (err.responseJSON.error.code = "-2130575252, Microsoft.SharePoint.SPException")

RefreshRequestDigist();

else

alert(JSON.stringify(err));

}

});

}

$(document).ready(function(){

$("#emplyeeName").autocomplete({

source: searchUsers,

minLength: 2,

select: function (event, ui) {

var label = ui.item.label;

var value = ui.item.value;

$("#emplyeeName").val(ui.item.label);

return false;

}

});

</script>

Sunday, December 25, 2022

SharePoint List Rendering with VUE.JS Ajax call

When we using in client side developing is not matter what version of SharePoint it will work in all version of SharePoint.

Steps:

1. Create SP list with Name "Test"

2. Add some data to list

3. For the example I have only title column

Now after creating the list we will write some code

1. Create a folder in your workspace with name ex "vue-demo-sp-list"

2. Inside the folder create a html file "index.html"

3. Open the file with editor (vs-code,notpad++)

4. Copy the code below

<thead>

<tr>

<th>Title</th>

</tr>

</thead>

<tbody>

<td>{{item.title}}

</td>

</tr>

</tbody>

</table>

</div>

const app = new Vue({

el: '#app',

data() {

return {

items:[]

}

created: function () {

this.getTestList();

methods: {

getTestList:function() {

var that = this;

var endPointUrl = _spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getbyTitle('Test')/items";

var headers = {

"accept": "application/json;odata=verbose"

};

$.ajax({

url: endPointUrl,

type: "GET",

headers: headers,

success: function (data, status, xhr) {

that.items = data.d.results;

//alert('Success');

error: function (xhr, status, error) {

console.log("error",xhr);

}

});

}

});

</script>

5. upload to sharepoint assets folder create folder for the project

6. add content editor webpart in some page and put the link to the file "index.html""

DEMO

Title
{{item.title}}

Monday, December 21, 2015

how to show oracle table in SharePoint page (gridView)

1. Create custom .aspx page in sharepoint

2. Edit page with sharepoint designer

3.Grab a SqlDataSource from the insert--> ASP.NET -->Data ToolBox and set up your connection string like below:

<asp:SqlDataSource runat="server" ID="myOracleDBSource" ProviderName="System.Data.OracleClient" ConnectionString="Data Source=(DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=[host name])(PORT=[port number]))(CONNECT_DATA=(SERVICE_NAME=[service name])));User ID=[username];Password=[Password];Unicode=True" SelectCommand="SELECT * FROM [view name] ">

</asp:SqlDataSource>

4. Grab a GridView from the insert--> ASP.NET -->Data ToolBox and then Set AutoGenerateColumns to False.

- Add BoundField Columns in GridView and set the DataField and the HeaderText accordingly. See below:

<asp:GridView runat="server" id="myOracleGridView" AutoGenerateColumns="False" DataSourceID="myOracleDBSource" AllowPaging="True">

<EmptyDataTemplate>No Records Found !</EmptyDataTemplate>

<asp:boundfield DataField="column 1" HeaderText="column 1" SortExpression="column 1">

</asp:boundfield>

<asp:boundfield DataField="column 2" HeaderText="column 2" SortExpression="column 2">

</asp:boundfield>

</asp:GridView>

5. Compile and run your page to see the output

Column 1	Column 2
Eve	Jackson
John	Adisu

Tuesday, November 5, 2013

Create your first SharePoint 2013 App via Napa

In this article i will show you how to develop SharePoint 2013 App

Steps:

1. Sign up for an Office 365 Developer Site here
2. Go to site content and click add in app
3. Select Napa App from SharePoint store

3. Create Developer site collection
4. Select the "Build an app" option

5. Select "App for SharePoint" option
and provide name for app

6. In this example i will show weather forecast of Ethiopia capital city
(see older post display-current-weather)

Html
in Defualt.aspx append this table into
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server"> tag

<table border="0" width="100%">
    <tr id="WtitleImage"></tr>
    <tr id="Wc"></tr>
</table>
    <div id="WIcon" />

Css
in App.Css file append classes

#wxWc {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin: 1px 6px 0 8px;
    overflow: hidden;
}

#wxWc {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin: 1px 6px 0 8px;
    overflow: hidden;
}

#WIcon {
    display: inline-block;
    font: 20px/28px Arial,Verdana,sans-serif;
    color: #333;
    vertical-align: top;
    padding-top: 5px;
    margin-left:
}

Java script
in App.js file append this function
and in document redy function create a call to function

    function showAddisAbeba()
    {
        var u="c";
    var loc="ETXX0001";
    var query = "SELECT item.condition \
            FROM weather.forecast \
            WHERE location='" + loc + "' AND u='" + u + "'",    url = 'https://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&format=json';
        $.ajax({
            url: url,
            dataType: 'jsonp', // this automatically disables cache too
            success: function(data) {
                var info = data.query.results.channel.item.condition;
                $('#WIcon').css({
                    backgroundPosition: '-' + (61 * info.code) + 'px 0'
                }).attr({
                    title: info.text
                                });

    // append to table
                            $('#WtitleImage').append('<td>Addis Abeba Ethiopia</br><img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" /></td>');
                             $('#Wc').append('<td>'+info.temp + '°' +(u.toUpperCase())+'</td>');        }
        });
    }

7.Click Run Project icon

8. Result

9.Under site content option we will see our app

Do you like this post?
Buy me a cup of coffe to show your appreciation!

SharePoint Coffee

ads