Create an App in Office 365 and SharePoint 2013: Part 1

Hello Readers.

As we saw from my last article how to create an App in Office 365 and SharePoint 2013, here from this article onward we will see the various apps that you will be able to use in your daily job profiles and it's actually going to help you a lot.

As per my last statement “When we all see some new apps, the first thing of a techie guy that comes to mind is “Even I want to make an app” but people either get carried away or are not able to determine how to start.”.

Hereon from this article we will see many apps in Office 365 and SharePoint 2013. So, let's go ahead and see various types of web parts.

We'll see them step-by-step and build an app,

• Open your site in Office 365 on On-Premise.
  
  
• Click on the Site Settings and click on Add an app.
  
  
  
  
• Add "Napa" Office 365 Development Tools from the SharePoint Store.
  
  
  
  
• Once you add the tool, it will be available in your site contents. This app is a tool to start building apps for Office and SharePoint.
  
  
• Once added click on it.
  
  
  
  
• It will ask you what kind of app you want to build, for us it will be App for SharePoint.
  
  
• Provide it a name and click on Create.
  
  
• In this article we will create an app that will provide the number of lists on our site.
  
  
• Here we will place a button on the site where we will get the count by just clicking on it rather than going to the site contents and counting it manually.
  
  
• Now when your app has been created, you will get to the default.aspx page of your app displaying the code behind.
  
  
• Paste this code under PlaceHolder Main.
  
  1. <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
  Code:
  
  1. <div>
  2. <button id="gettotalListCount">Get count of lists in web</button>
  3. </div>
  Here we are creating a button where we will generate an event.
  
  
• Now we need to write a function for the button to call, so click on App.js.
  
  
  • Here in App.js , copy the following variables on the top.
    
    1. var context = SP.ClientContext.get_current();
    2. var web = context.get_web();
    3. var lists = web.get_lists();
    Here we assign the variables to be used in functions.
    
  • Under the document.ready function, paste the flowing lines of code to call the function.
    
    1. $(document).ready(function () {
    2. $("#gettotalListCount").click(function (event) {
    3. getWebdetails();
    4. event.preventDefault();
    5. });
    Here under the document.ready function we are calling our function on page load.
    
    
  • Then paste the following function where we will write our function of getWebdetails:
    
    1. function getWebdetails () {
    2. //Get the number of lists in the site
    3. context.load(lists);
    4. context.executeQueryAsync(onSuccessAlert, onFailAlert);
    5. }
    7. function onSuccessAlert(sender, args) {
    8. alert('Number of lists in the site: ' + lists.get_count());
    9. }
    11. function onFailAlert(sender, args) {
    12. alert('Failed to access list. Error: ' + args.get_message());
    13. }
  Here in this function on context.load we will get all the details and while using them we will do something with the arguments using context.executeQueryAsync to validate the error in the code.
  
  
  
• Once you make all necessary updates to you code, click on the Play icon button that states “Run Project”.
  
  
• It will first prepare >> deploy>> launch.
  
  
  
  
• Here we have our app deployed with a button stating “Get count of lists in web”.
  
  
  
  
• On clicking the button we have the alert showing the count of the lists present in the current site.
  
  

Here it was our first app demonstrating the number of lists in a single click. Soon we will see many new apps on our way. Until then, keep learning.

Cheers!