How to Create Money Lending App using PowerApps and SharePoint

Money lending app is basically an app where we can monitor our transactions of lending money to others. In this vast life its hard to keep record of every transactions in pen-paper format. So, we created an app which can be access and monitored from anywhere whether you are in your home or outside while jogging.
I used SharePoint list as a data source for this app. So, Let’s create the app step by step.

Step-1) Creating Necessary List in SharePoint

The first step is to create a list in SharePoint that can holds our data for the app –

1. Create a custom list called “MoneyLendingApp” with following columns and column types.

After creating all columns your list will look like this.

2. Create second list Name “LoanDuration” and add following items like below picture so that we can use it as our drop down option for Duration period

Now our SharePoint work is done now we will create the app in PowerApps.

Step-2) Creating the app in PowerApps

In this step we are going to create the app in PowerApps, log into https://make.powerapps.com and change environment to your trial environment and select “Canvas app from Blank”  and enter name “Money Lending App” and click next.

When the studio opened, change the first screen name to Home Screen and add any background image if you want to enhance your app or you can continue with solid colour and add a header like the below image.

Now add two buttons like the above picture and change the text “New Application” and “View All Application”, now rename the buttons into “NewAppBtn” and “ViewAllBtn” respectively. We will add actions for the buttons in later steps.

*Note: all the rename instruction need to be followed without quotes.

Adding new screen for new application.

Now, add a new blank screen and rename it “NewApplicationScreen” and add a header label and change text to “New Application”.
Therefore, click on insert Tab and add a edit form and rename it “NewAppForm” and change the Position
X = 0, Y = 73 ; Size width = 640, Height = 1004

Add your SharePoint data source and select that data source as the data source of the edit form that we created earlier.

In the Edit Form “NewAppForm” select the layout Horizontal and add the “DueOn” field from the edit fields options.

Select the text input field of Contact and Amount and change the format into Number, after that open the edit field tab and select ‘edit multiline text’ for Address and select allowed values for Duration field. So that our app looks like the above picture.

Now Select the date’s input field and unlock that field and set the following properties.

Default = Today();
DisplayMode = DisplayMode.View

Now we configure the Duration field by adding that another SharePoint list (LoanDuration) that we created in SharePoint as data source.

After adding that Data source select the OnVisible property of the ‘NewApplication’ screen and write the following –

OnVisible(fx) = UpdateContext({LoanDurationVar: LoanDuration.Title})

It will create a variable table so that we can use in our drop down list of Duration Field. After that select the drop down control of Duration it may be named “DataCardValue11” change the Items property to ‘LoanDurationVar’ that we created earlier so that it can show the duration. It will look like the below picture.

Now, come to the next field DueOn, it is the most important field to configure because here we will show the calculated value of Date and Duration. So, it will show the added date when Duration changes, so follow these steps carefully-
Select the ‘DueOn’ card and unlock it from properties bar so that we can modify it, thereafter select the label DueOn and change the Text function to “Due On” so that there is a space between the title.
After that select the input field of Due On card and add following functions –

Default = If(DataCardValue11.Selected.Title = "1 Month", Text(DateAdd(Today(),1,Months)," dd-mm-yyyy"),
If(DataCardValue11.Selected.Title = "2 Months", Text(DateAdd(Today(),2,Months)," dd-mm-yyyy"),
Text(DateAdd(Today(),3,Months)," dd-mm-yyyy")))

*Note: A function [$-en-US] will automatically create before your date format and if it shows any error replace the ’US’ part of the function to your tenant region code.

DisplayMode= DisplayMode.View

We’re setting here the display mode so that, no one can edit that value and it will get automatically set. After Completing the above steps your app will look like below image –

Now, we will add and configure Submit button and Cancel Button. Add two buttons like the below picture –

After adding buttons configure their actions as follows –

For Submit Button

Fill = RGBA(73, 130, 5, 1)
HoverFill = ColorFade(RGBA(73, 130, 5, 1), -10%)
PressedFill = ColorFade(RGBA(73, 130, 5, 1), -30%)

For OnSelect we will add a success screen from new screen option. So, add a screen and name it SuccessScreen after that the label where it is written “ This was successfully completed”, change the text to “Your application is submitted successfully.”

Thereafter, add a Button below the label and change text property to “Go back to Home” and change the OnSelect property of that button to Navigation(HomeScreen, Fade)

Now come to our Submit buttons Onselect property and change it to =

SubmitForm(NewAppForm);Navigate(SuccessScreen,Fade)

For Cancel Button

Fill = RGBA(151, 0, 0, 1)
HoverFill = ColorFade(RGBA(151, 0, 0, 1), -10%)
PressedFill = ColorFade(RGBA(151, 0, 0, 1), -30%)
OnSelect = ResetForm(NewAppForm);Back()

Now we successfully completed all the work in our NewApplication. So, add the OnSelect function of NewApplication button in the home screen as –
Navigate(NewApplication, Fade); NewForm(NewAppForm)

Click File tab and save the app after that we will create another screen to view all applications in gallery format and also detailed format. For now, you can enter your details as new application so that you can use as an example for the view application screen also to check whether your data is being saved on SharePoint list or not.

Creating screens to view applications

First of all, we create a screen where all applications are visible in a gallery. Add a new blank screen and rename it “BrowseApplicationScreen” and add a header label with the text property “All Application”.

Thereafter add a vertical gallery and rename it “BrowseGallery” after that select the ‘MoneyLendingApp’ as Data Source and change the layout to ‘Title and Subtitle.’

After changing the layout the two labels will shown on the gallery so, we need the only two details i.e., Name and Email so select the ‘Title2’ and change the Text Property to “ThisItem.Name” after that select the ‘Subtitle2’ label and change the text property to “ThisItem.Email” so that the app will look like the below picture.

Now we will create our next screen i.e. Details screen to view all the details of the application. So, add a new blank screen and rename it DetailsApplicationScreen and copy the header label from BrowseApplicationScreen and paste it to Details Screen after that change its text property to –

Text (Fx) = BrowseGallery.Selected.Name

You will see the one name will start displaying on the header label like below picture.

Thereafter, insert a view form from the insert > Forms and rename it DisplayForm. Resize the display form properly in the screen and select the ‘MoneyLendinApp’ as the data source and select or check all the fields that is required to show from the Edit Fields option. Note that from the edit field tab select ContactCard and change control type to View Phone just like that select the Email Card and change its control type to View Email.
Thereafter, change the Layout of the display form to Horizontal.

Now the data source is selected and cards were configured properly. Your Form will look like this.

But it is a display form and it can’t show all data at once so we need to configure it that way so that when different data is selected from the Browse gallery then it will show only that data.
Again, select the item property of the display form and write the following syntax

Items (Fx) = BrowseGallery.selected

Your display form will start showing you the one data that is created by you in  previous steps and look like this.

Now Insert a Left icon on the top left to go back from the screen and set its OnSelect function to Back()

Now, come to the Browse screen and select the next arrow of the Browse Gallery and set its OnSelect property to “Navigation(DetailsApplicationScreen, Fade)”

After configuring that now come to HomeScreen and Select the “View All Application” Button and set its OnSelect Property to : Navigate(BrowseApplicationScreen, Fade)

Now the app is built successfully and ready for use. So, publish it and share with the users of your organisation.