Helpdesk App using Power App

By -

Here we will create a simple helpdesk app with Admin & user login.

Sample Admin Screen:
(Percentage Complete & Task Status Fields enabled for admin in edit screen)

Sample User Screen:



In this post we will learn about:

  • Connect to SharePoint DataSource(we have more than 200 connectors)
  • Office365users - Connector(Give details about current logedin User, Office365users.MyProfile().Mail)
  • Screen - Create Screen with different templates(Blank,Scrollable, Success,Form, etc)
  • Controls - (Image, Rectangle, Button, Lable, Icons(BackArrow,Circle,Plus,Trash))
  • Gallery -Control to Read Item from SharePoint(like GridView)
  • Grouping Controls- Group multiple Controls as single control
  • Forms - PowerApp provides forms to Edit/Display SPList item(we can change Default mode to New/Edit/View)

        Events:

  • Set(GlobalVariableName, ValueToAssign) - create new global variable
  • Navigate(ScreenNameToNavigage,ScreenTransition.None) - Move between screens
  • SubmitForm(FormName) - Add new/Update Item to SharePoint
  • Filter() - Used to to filter data(used to load edit form item)
  • First() - Used to get first item from results(used in Edit Form item)
  • ResetForm(FormName) - Clear form fields
  • Remove(DataSource,globalVariable) - Delete Item From SharePoint
  • Back() - Move to previous screen
  • Collect(CollectionName,{key1:val1,key2:val2...}) - Collection will store collection of data. we have to define in AppLevel>OnStart
  • ClearCollect(CollectionName,"textToCollection") - This will clear the collection & store the given data.
  • If(TrueOrFalse,IfPart,ElsePart) - if statement we can use in powerapp
  • App OnStart - Event, Collection will be initialized when app is loaded initially
  • Button OnSelect - Click Events in PowerApp


Create SharePoint List as data source:

    Create a list called HelpDesk & add the columns mentioned below


Create new canvas app:

    Go to your make.powerapp.com (Powerapp studio) > Create > Blank Canvas App > Create > give name(PowerApp-Demo) > Format Mobile> Create




Connect DataSource:

    Go to Data> Add Data> Connectors> SharePoint > select Login > select Site > select List > Connect




Screen1: Login Screen:

   Rename screen name to Login screen & add image to the screen.

Add label to display title (like label)

Add 2 buttons for admin & user login


Screen2: MyTickets(Read Operation):

   1.Create new screen (blank) > Rename it as MyTickets.


    2.Loing button click event on loginscreen > loginUser Button > add  "Navigate(MyTickets,None)" formula in onselect ( To redirect Myticket screen)
    3.TopHeader section:Now change the background of this MyTicket screen & add TopHeader section. For top header
1. Add Rectangle(set background color & width:640 and height(as needed)
2. Add Label (text: My Incidents, background:white, Make it as bold & size 25)
3. BackArrow (+ > Shapes > Back Arrow. Change color & size 50*50)
4. Circle (+ > Shapes > Circle, change border color:white & size 50*50)
5. Plus Icon ( + > Icons > Add, Change color & size 30*30)
 


4.Grouping all Controls: Now rename all controls & group all the TopHeader control into a single group
    5.Gallery Control: Insert> Layout> BlankFlexibleHeightLayout gallery > next select data source as SP List(HelpDesk)
    6.Update gallery UI: To add contros inside gallery, clik on edit icon then add controls.
    (i)Add rectangle for white background
    (ii) Add 4 labels to show Title, Category, AssignedTo & Created(Font size:14& resize accordingly)
    (iii)Add 2 buttons Delete & Edit (font size:14, border radius:50, size:130*55)
    (iv)To bind label values > select Gallery > Properties > Fields > Edit > select relevant Column

  6.My Ticket BackArrow Click:
    redirect to login screen OnSelect: Navigate(LoginScreen,ScreenTransition.None)
    Set PowerApp GlobalVariable:
    (ii)Delete button Click: To pass the selected item to DeleteScreen we will use global variable.
         Set(itemToDelete,ThisItem);
         Navigate(DeleteScreen,ScreenTransition.None)



Screen3: DeleteScreen(Delete Operation):

    MyTicketScreen delete button Click:
    Set PowerApp GlobalVariable:
    To pass the selected item to DeleteScreen we will use global variable.
         Set(itemToDelete,ThisItem);
         Navigate(DeleteScreen,ScreenTransition.None)
    1.Create new screen 'DeleteScreen' (blank) > Rename it as DeleteScreen > Set background & Header > Add Trash Icon as delete button.

    (i) Delete button Click: Remove(HelpDesk,itemToDelete);Navigate(DeleteConfirmationMsgScreen,ScreenTransition.None); (Note: Helpdesk-Datasource, itemToDelete-globalVariable)
    (ii)Create new Screen to show deleted successfully message.(use Success Template), Change the message & style. Add LeftArrow icon(to navigate to MyTickets screen)



Screen4: AddItem Screen(Create Operation):

    MyTicketScreen Add button Click:
    To navigate to CreateNewIncident screen, add OnSelect event to circle & Add Icons.
         Navigate(CreateNewIncident,ScreenTransition.None)


 1.Create new screen 'CreateNewIncident' (Scrollable) > Rename it as CreateNewIncident> Set background of Header & title > Add > Inputs:Edit form > Select DataSource > Change Default Mode to "New"

    Add 2 buttons for Submit & Cancel. Change the style & display text of the buttons. Also we can remove the Fields from new Form (if we don't want to display to user).
Sumbit button OnSelect: SubmitForm(Form1);ResetForm(Form1);Navigate(MyTickets,ScreenTransition.None)
Cancel Button OnSelect: Navigate(LoginScreen,ScreenTransition.None)

Screen4: EditItem Screen(Edit Operation):

    MyTicketScreen Edit button Click:
    MyTicket Screen> Edit button> OnSelect > Set a variable for item to be updated & Navigate to EditIncident screen.
         OnSelect:Set(itemToUpdate,ThisItem);Navigate(EditIncidentScreen,ScreenTransition.None)

 1.Create new screen 'EditIncident' (Form) > Rename it as EditIncident> Set background of     Header & title  > Select DataSource > add Filter formula to Datasource

Edit Form Item : First(Filter(HelpDesk,ID=itemToUpdate.ID))
Submit(✓) OnSelect: SubmitForm(EditForm1);ResetForm(EditForm1);Navigate(MyTickets,ScreenTransition.None)
Cancel Icon OnSelect: Navigate(MyTickets,ScreenTransition.None)
(Note here: HelpDesk-DataSource, itemToUpdate-Global Variable)



Admin Login Functionalities:

Collections: are used to store list of data. We can initialize collection on App > OnStart > ClearCollect(AdminList,"Silambarasan@8211n1.onmicrosoft.com")
Here AdminList - Collection name, "email" is collection value, ClearCollect()- will clear collection in app load & add data to collection

Office365users: is a connector used to get the current logged in user details. We will get current login user email (to compare with Admin user list collection whether current user is Admin). Set(myEmail,Office365Users.MyProfile().Mail)


LoginScreen Admin Button Click: OnSelect this button we will check current user Email is present in Admin List, if YES redirect to MyTickets screen or else we will display error message in Label.
If(myEmail in AdminList,Set(isAdmin,true),Set(isAdmin,false));
If(myEmail in AdminList,Navigate(MyTickets,ScreenTransition.None),Set(ErrorMessage,true));
Add a label to show error message & Visibility > true or False(use ErrorMessage Variable which is create in above step)

Disable controls for normal Users(EditIncidentScreen) : we can use isAdmin variable to check user is admin or not & based on that we can disable controls.
Select Control > Advanced Properties > unLock > select 'DisplayMode' > add this formula
If(isAdmin,DisplayMode.Edit,DisplayMode.Disabled)
Here we will be disable edit 2 controls for normal users (1.Percentage Complete & 2. Task Status)


Please Refer this link for more details Link1, Link2, Link3

Comments

Post a Comment

Popular posts from this blog

Upload Single/Multiple file by using the REST API and jQuery SharePoint 2013

By -
Image
Upload  Single/Multiple  file by using the REST API and jQuery SharePoint 2013 Here you can find how to upload single/multiple file in SharePoint 2013 Library using Rest API. We can use the Content Editor web part to call the script files. Include Script files in Content Editor: Go to content editor -> Edit Source -> enter the code like below (code for including the script files) For 'jquery.min.js' we can either use direct link from online or we can download to our SharePoint library & We can use that. <script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> OR use the below code <script src="/ sites/<SiteName>/<Subsite>/SiteAssets/jquery-1.11.1.min.j s"></script> <script src="/ sites/ <SiteName>/<Subsite> /SiteAssets/taskpage.js " type="text/javascript"></script> <script src=" /sites/ <SiteName>/<Subs
Read more

A type named 'SP.Data. could not be resolved by the model error

By -
Image
When we are trying to update task list we will get this error " A type named 'SP.Data. could not be resolved by the model error. When a model is available, each type name must resolve to a valid name must resolve to a a valid type" This happens because there is a space in the list name. To resolve this issue we need to get the exact list name to be used in "SP.Data" 1.Use the below URL in chrome browser <SiteUrl>/_api/web/lists/GetByTitle('List Name')/ For Example:  https://SiteURL/_api/web/lists/GetByTitle('Workflow Tasks')/ Some times in Chrome browser you may get Authentication error. For that first open the list from your Chrome browser & then use the above URL. 2.Find "SP.Data" -> now you will get the list name that you can be used in SP.Data.ListNameListitem
Read more

Add content type to SharePoint List/Library using REST API

By -
Add content type to SharePoint List/Library using REST API Use this below code to add content type to SharePoint Library using REST API. For this you need to use the content type ID. Below function will get the content type ID from content type name & we will pass the content type id to next function which will update content type to list/library. var   varContentTypeName = " Your Content Type name "; var   Listname = " Your List name where you want to add content type "; //This will get the content type ID from content type Name function  getContentTypeID() { var deferred = $.Deferred();     var  isCurrentUserIsApprover = false ; var  serverURL = _spPageContextInfo.webAbsoluteUrl; var  listURL = String.format(" {0}/_api/web/AvailableContentTypes?$select=Name,Id,StringId&$filter=Name eq '"+varContentTypeName+"' ",serverURL); $.ajax({ url: listURL, type: " GET ", async: false, headers:
Read more