Mikko Koskinen

Cascading Fields in Power Apps Forms – Basics and Few Tips

Posted on 02/26/2020 by Mikko Koskinen

Main Requirements

We have a SharePoint list that has a Type field
We want to able to select the type from a range of values that can be categorized into multiple different categories
We want to give the administrators an easy way to maintain these values, so they should be placed to a SharePoint list
- There are two SharePoint lists Main Category and Sub Category
- Sub Category has a lookup column pointing to the Main Category

In the custom form, the users are first selecting the category, and then they can select the value belonging to this category from the second drop-down box

Basic Form With Cascading Fields

Let’s create a simple canvas app for our form. Form only has a text box for the title, two drop-down boxes for selecting the categories, and a submit button. You also need to connect the app to all the three lists in SharePoint.

Even though this is a simple list, remember the naming convention. Taking a habit to rename the controls and screen will help you in the future. You can also use grouping, as I did for the labels, to make it easier to find important elements in the tree view.

Add the necessary label, one text input, and two drop-down box
Select the Items property of the first drop-down (ddpMainCategory in the example)
Connect the items to the Main Category list
Make sure the value property is set as Title
Do the same thing to another drop-down (ddbSubCategory) but connect it to the Sub Category list

The basic setup is now done, but we are missing the cascading part. The category selection doesn’t filter the value list. We need to change the items selected for the second drop-down to make this happen.

In the items selection of the ddpSubCategory, we need to filter the items based on the selection in the other drop-down box

Filter('Sub Category','Main Category'.Value = ddpMainCategory.Selected.Title)

After this, we have the basic cascading fields ready

Saving the Details

In the SharePoint list, we only have the Title, and Type Value, and the values are now read from a different SharePoint list. Therefore we didn’t use a Power Apps form element where we have the SubmitForm action available. To save the details from our custom form, we need to use the Patch command. Add the following command to the OnSelect -event of the Save button. Again, remember to comment your code. It helps. I’ll promise

These functions will save the details to SharePoint based on what the user selected from the drop-down and resets the form for the next one. The idea in the Patch command is:

//Save details to SharePoint
Patch('Important List',
Defaults('Important List'),
    {
        Title: txtTitle.Text,
        'Type Value': ddbSubCategory.Selected.Title
    }
);

//Reset form element
Reset(txtTitle);
Reset(ddpMainCategory);
Reset(ddbSubCategory);

First ‘Import List’ is the name of the data source where we are running the patch command
Defaults command will tell to create a new item in the list
Next, we are adding the values from the form into the SharePoint columns of the new item
Value from the second drop-down box can be read from the Selected property
More info from the Patch – function: https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/functions/function-patch

Cascading Fields – Next Version

You might notice a couple of things in this way of building cascading drop-downs. Updating the ddbSubCategory field might take some time after we change the value in ddpMainCategory, and the first item in the drop-down box is selected automatically. In many situations, we want users to see an empty value in the drop-down and take action to choose the one they need.

To tackle these issues, we will read the drop-down selection values to collections in the app start
Open the App OnStart settings and add the following functions to save the selected items from SharePoint to two collection

//Main Categories to collection
ClearCollect(MainCatSelection,"");
Collect(MainCatSelection,'Main Category');

//Sub Categories to collection
ClearCollect(SubCatSelection,"");
Collect(SubCatSelection,'Sub Category');

First, we are clearing the possible old collections and adding one empty row into them
Then we collect the SharePoint rows from the lists and save them to the collections
Next, we need to update the items settings of the drop-downs
1. ddpMainCategory = MainCatSelection
2. ddbSubCategory = Filter(SubCatSelection, IsBlank(Title) Or ‘Main Category’.Value = ddpMainCategory.Selected.Title)
In the ddbSubCategory, we are filtering the collection so that the first black item is selected and also all the other rows that have the selected category value in the ‘Main Category’ field

Click the Run OnStart action for the App to populate the collection for the test. Now we have cascading drop-downs that are fast to use and show an empty value before the user is making the necessary actions.

Creating a Feedback Form Part 2 – Connecting the Flow

Posted on 02/11/2019 by Mikko Koskinen

1 Comment

In my last post, I started to create a Feedback form that is using the new possibility to us PowerApps for SharePoint Online list form customization. The first part shows how to create a separated forms for View, Edit, and New action. You should check that out first because we will extend that functionality on this post.

PowerApp Custom Forms and Flow – Creating a Feedback Form Part 1

In the old days, you probably have created workflow and send an email when something is added to the list. This type of action is completely valid, and you can still use traditional workflows even in Office 365. But the modern better way to do similar things is to use Flow. For our Feedback form, I wanted to connect the given feedbacks as tasks for our internal team that is building our Intranet.

Let’s add a Flow to our custom form and create a new to do item in Planner that comes as default service for each new Microsoft Group.

From the Feedback list click the PowerApps -> Customize forms from the lists action ribbon.
1. This will open the custom app forms application we did in Part 1 of this series.

From the ribbon select Flows.
1. This will open the Associated Flows panel.
Select Create a new Flow.
Flow application will be opened in new tab, and a new flow is created automatically.
1. You can see that the flow is associated to PowerApps.

What we wanted to do is to add a new task to Planner so let’s add an action to do that.
1. Click New step -> Add an action
2. From the opened form search all Planner related action by writing Planner to the search box.
3. Select the first action Planner – Create a task
4. This will add a new task to your flow. This task is used to create a new task into Planner.

Now you need to connect to correct plan and bucket where you want to add the tasks.
1. From Plan Id select the drop-down menu by clicking the down arrow in the field.
2. This will open a form showing all available Planner plans.
3. Select the one you want to use.
4. Do the same thing for Bucket Id. Except, this time you will see all available buckets found from the plan you selected.
For task Title let’s get the value from a user through PowerApps.
1. Select Title field and select dynamic content -> Ask in PowerApps.
2. This will create a new PowerApps parameter that we need to populate in our custom form. We will come back to this later.

You could give values for other fields also if you want.
1. One option is to add current time and date to Start Date-Time field.
2. Select the Start Date field and select dynamic content.
3. Open the Expression tab and scroll until you see utcNow().
4. Click utcNow and click OK.
Now we have a task that creates a new task to Planner and uses the title detail that the user created as task title.

But we are asking some more information from the user also, so let’s add the value from the Description field also into the task.

Add a new step after the first task above and add a new action.
From task selection form again, search planner but this time select Update task details.

To update the new task we just created, select Task Id field and Add dynamic content.
1. From the list select Id.
2. The created task will send us the details of the created task, and we can now use that info to find it and update the details.
Next, select the Description.
1. From dynamic content, menu select Ask in PowerApp to get the value from our custom form.

Finally, click the default name next to Flow name at the beginning of the form.
1. Give the flow a name you desire to use.
2. Click Create flow.
Finally, you can click Done, and our flow is completed.

At this point, we have a custom form and a flow that does the task creation. But we still need to combine these two, so that right after a new task is created a new task will be created automatically. Of course, we could attach the flow in New Item Added event on the list, but for this example, we will add the flow straight to our custom form.

Go back to the list and open the custom form PowerApp.
Open the NewFormScreen we created in Part 1.
From the screen select CustomNewForm.
1. Expand the Title and Description card details. You need the see the name of the fields of the cards later on.

While the form is selected choose OnSuccess event from the attribute drop-down.
1. This event is run every time a new item is added successfully to the list.
2. By default, it includes two actions. One for clearing the form and another one to close the panel.
3. Copy the current OnSuccess value and save them for later use.
From the ribbon select Action -> Flows
1. You should see the flow you created earlier.
2. Select the flow, and it will be added as a task to the OnSuccess event.

Now we need to give those two parameters, Createatask_Title and Updatetaskdetails_Description, we decided to ask for the app.
1. We will connect the form fields to the Flow task call to get the text user has given.

The field value reference can be done based on the field name on the card.
1. The name depends on your environment, but on this example, the names are DataCardValue2_1 for Description, and DataCardValue1_1 for Title.
2. With the name, you can refer to the Text value and use that on the Flow call.

Finally add the default tasks back to the OnSuccess action so that the form will be reset and closed when everything is done.
1. Here’s the whole value used in the example: NewIntranetFeedback.Run(DataCardValue1_1.Text, DataCardValue2_1.Text); ResetForm(CustomNewForm); RequestHide()
Now save and publish the app to SharePoint.

Navigate back to your list and start to add a new item. After the save check from Planner (https://tasks.office.com/) that a new task is added for future steps.

PowerApp Custom Forms and Flow – Creating a Feedback Form Part 1

Posted on 01/14/2019 by Mikko Koskinen

1 Comment

Last month Microsoft announced a long waited functionality where you can use PowerApps to customize the modern list forms in Office 365. Customizing the OOTB SharePoint list forms is something we have done for years already, and everyone has done customizations in multiple different ways.

But when the new modern lists were announced, all of those old ways were useless. I do understand the shouts and anger that came out of this. Starting from last month the first release tenants have been able to use PowerApps and Flow to create custom forms. We can finally do something real with list forms.

Here are few articles related to custom form with PowerApps.

Over the time, I have created many types of Feedback forms in my SharePoint projects. The most simple solution is to use SharePoint list and let the users send feedback with OOTB form. But maybe there has been a need to give some instructions to the users or notify someone when new feedback created. To do this, you need to do some level of customization. Sometimes even some coding.

The best part of the new features in Office 365 is that changes can now be done without coding (almost, in many cases, etc. 😉 ) Even a power users can create customization with PowerApps and Flow. This is exactly what I’m about to show in this series.

My example form has the following requirements.

Give a possibility to add some text and instructions to the users when they are giving the feedback.
Show the necessary fields for feedback gathering.
Save the details to SharePoint list.
Create a new task on a backlog list in Planner.
Give a quick view and search for existing feedback items.

Custom List for Feedbacks

Step one which is the easiest one. Just create a new list to your SharePoint Online site.
- Make sure that the list type is modern. I did create the list to the new modern team site that comes along the Office 365 Group.

Now add two new columns to the list. The quickest way to do this is by clicking the + sign on the view.

Create the following fields
- Description – Multiple lines of text
- Feature Type – Choice with values; New Feature, Question, Update, and Bug
And now you do have a simple feedback form ready to use!

PowerApp for Custom Forms

Now, let’s start to customize the form. Open the PowerApps menu from the list toolbar and select Customize forms. This will open and create the PowerApps application for your lists forms. Let’s take a look at few things before we make any changes.

Click the SharePointIntegration link on the left and select Advanced tab from the right.
- You can see the basic settings of the SharePoint integration from this screen.
- DataSource is pointing to the list you created, and Action selection is pointing to custom forms.
Notice that all Action events are pointing to only one form.
- Different action types are handling the data mode automatically so calling your form with ViewForm action will show to form in read-only mode.
- One thing to remember here is that in OOTB only one form is used. If you make any changes, these changes will reflect on all views types.
To solve this issue, we need to create a new screen and form for our custom form.
- Follow the steps given in this amazing post from PowerApps community: https://powerapps.microsoft.com/en-us/blog/separate-custom-forms/
I ended up to create only two screens seen in the image above. One screen is for View and Edit, the other is for New item creation. You still have to update the values for each action setting in the SharePointIntegration. My settings are as follows (remember to use the names you set on your screens).
- OnNew – Set(SharePointFormMode, “CreateForm”); NewForm(CustomNewForm); Navigate(NewFormScreen, ScreenTransition.None)
- OnEdit – Set(SharePointFormMode, “EditForm”); EditForm(CustomViewForm); Navigate(ViewFormScreen, ScreenTransition.None)
- OnView – Set(SharePointFormMode, “ShowForm”); ViewForm(CustomViewForm); Navigate(ViewFormScreen, ScreenTransition.None)
- OnSave – If(SharePointFormMode=”CreateForm”, SubmitForm(CustomNewForm), If(SharePointFormMode=”EditForm”, SubmitForm(CustomNewForm)))
- OnCancel – If(SharePointFormMode=”CreateForm”, ResetForm(CustomNewForm), If(SharePointFormMode=”EditForm”, ResetForm(CustomNewForm)))
Now let’s make some changes to the New form. Delete the fields that are unnecessary like date fields etc.
- Select the Title_DataCard from the CustomNewForm table and increase the height.
- Lower the Title field and add two new Label controls at the beginning of the form.
- Add the instructions in these new labels and make any other change you like.
- You also have to change the mode of the Description box (DataCardValue2_1) to Multiline.
- Now save and publish the forms.

Navigate to the Feedback list and try to create a new item. You should now see our custom form in use. Create one item and open it and you should see a different form in use.

In next part we will add a Flow send our Feedback to Planner.

Part 2: https://mikkokoskinen.com/2017/12/06/creating-a-feedback-form-part-2-connecting-the-flow/

Reading Word File Content from Office 365

Posted on 10/25/2017 by Mikko Koskinen

Use it in an Application

Finally, I did solve the issue and I will show you how. This is just a quick example of the functionality without a complete application. I’m having a session on upcoming Saturday 10/28/2017 in SharePoint Saturday New England at 9:00 am.

My session title is “Tools for Information Worker – Introduction to Office Add-ins Development.” On the session, I will demonstrate a complete example on how to use these techniques, and I will also share the source code of the application after the session.

http://spsnewengland.org/agenda/

Stay tuned and follow me in Twitter @mikkokoskinen to know when the application is available.

Reading in Node.js Application

But back on the solution. You are able to use the REST API call called getfilebyserverrelativeurl with the $value attribute to get document with content.

<span 				data-mce-type="bookmark" 				id="mce_SELREST_start" 				data-mce-style="overflow:hidden;line-height:0" 				style="overflow:hidden;line-height:0" 			></span>
executor.executeAsync({
  url: "<app web url>/_api/SP.AppContextSite(@target)/web
    /getfilebyserverrelativeurl('/Shared Documents/filename.docx')/$value
    ?@target='<host web url>'",
  method: "GET",
  binaryStringResponseBody: true,
  success: successHandler,
  error: errorHandler
});

More info: https://msdn.microsoft.com/en-us/library/office/dn450841.aspx

If you change the placeholders from the above REST call and navigate into that on your browser, the document will be downloaded automatically. In a case you have ever used Microsoft Graph to get documents from a document library, you may have seen a parameter called @microsoft.graph.downloadUrl. For example, this call will list documents from the library with a given id: https://graph.microsoft.com/v1.0/drives/{library-id}/root/children.

In case you didn’t know @microsoft.graph.downloadUrl gives you a short-term access to the file without a need to send authentication inside a call header etc. The URL has a temporary authentication token that is valid only for a couple of minutes. But the same thing with that URL. If you navigate to that URL, the document will be downloaded.

So how to get the content into a variable and use it? Here’s a short explanation on how you can use the call return value in an application that is using Node.js and TypeScript. Maybe your application is a Word add-in, and you want to read the document in Office 365 as a starting point for your own document.

In the example, we have a situation that you have the @microsoft.graph.downloadUrl of the file, and you want to download the content into a variable.

For easy call based on URL, we will use a module called node-fetch.
1. It’s light-weight module that brings window.fetch to Node.js
2. More information from here: https://www.npmjs.com/package/node-fetch
Run npm install –save node-fetch in the terminal window to install the module for the project.
Open the TypeScript file where you want to add a function for the call.
Add a new reference for node-fetch: import fetch = require(‘node-fetch’);

Then add a function that uses the @microsoft.graph.downloadUrl to get the content of the document.

1. The URL is sent as a parameter in the function call.
2. This function is resolving a promise so that we can use await functionality when we are calling the function.

static getTemplateDocument(templateURL: string) {
        return new Promise<string>(async (resolve, reject) => {
            let templateArray: any;
            fetch (templateURL, {body: 'buffer'}).then(res => {
                res.buffer().then( data => {
                    templateArray = data;
                    resolve(templateArray);
                });
            });
        });
    }

The important part is to set the body setting of the fetch call as a buffer. The default value for the body is empty, but we specifically want to get the content of the document.
1. When this setting is set, we can use the buffer() function of the result we are getting back from the fetch to read the data.

And the Data is?

We are almost there. The question is that what does the getTemplateDocument call actually send back to us?

The answer is that we are getting back a Uint8Array that holds the content of the template Word document. We can now use this array in a way our application needs it. In Office.js there is a function called insertFileFromBase64. With this function, we can add a content of a docx file into our current document as long as the file is base64 encoded. And because we already have the file in Uin8Array format, it’s easy to make the transformation and insert the file.

Here’s a short example code for that when we have the file back in a result attribute from the function call above.

var templateBuffer = result.data;
    var u8 = result.data;
    var b64encoded = btoa(String.fromCharCode.apply(null, u8));

    Word.run(function (context) {

        // Create a proxy object for the document.
        var thisDocument = context.document;

        // Queue a command to get the current body.
        // Create a proxy range object for the selection.
        var body = context.document.body;

        // Queue a command to replace the body.
        body.insertFileFromBase64(b64encoded, Word.InsertLocation.replace);

        // Synchronize the document state by executing the queued commands,
        // and return a promise to indicate task completion.
        return context.sync().then(function () {
            console.log('Added the content of the file .');
        });
    })
    .catch(function (error) {
        console.log('Error: ' + JSON.stringify(error));
        if (error instanceof OfficeExtension.Error) {
            console.log('Debug info: ' + JSON.stringify(error.debugInfo));
        }
    });<span 				data-mce-type="bookmark" 				id="mce_SELREST_start" 				data-mce-style="overflow:hidden;line-height:0" 				style="overflow:hidden;line-height:0" 			></span>

Use case: List Posts – Using Widget Wrangler and AngularJS in the web part development

Posted on 07/29/2016 by Mikko Koskinen

3 Comments

In this post, I will show you how you can create a widget or web part that show you a list of posts from SharePoint blog site. The element is done purely as client side coding. One thing that is true with SharePoint is the fact that you can do the same things in multiple ways. Same goes here with this example, but my aim here is to demonstrate how you can create plugins, web parts, apps however you want to call them, easily and purely as client side development. I think that a word widget is most descriptive, and that is what we will be using here.

This example is based on real life solution that I made on my last project on top of SharePoint 2013 on-prem. The widget is also tested to be working in SharePoint Online. Technically you could use it any other web platform, and that is the key why I want to present you a framework called Widget Wrangler.

What is Widget Wrangler?

Why try to summarise something when it’s done perfectly in the actual source? “The Widget Wrangler is a lightweight framework for managing the loading of javascript “widgets” on a web page.”. With the framework, you can create isolated widgets and control the loading of each file and dependency you need for the element.

With Widget Wrangler (later ww) you can encapsulate the functionality of the widget so that different, or even multiple of the same kind, elements won’t be interference with the hosting page and other widgets. This way the isolation and creation of truly separated UI and functionality are easier to do. The framework also manages the efficient loading when multiple web parts on a page use the same javascript libraries or CSS files.

<div class="latestPostWP">
 <div posts-element></div>

 <script type="text/javascript" src="/ourfirm/offices/SiteAssets/js/pnp-ww.min.js" 
 ww-appname="LatestPostWPApp" 
 ww-apptype="Angular"
 ww-appcss='[{"src": "/ourfirm/offices/SiteAssets/webparts/LatestPost/latestPost.css", "priority":0}]'
 ww-appScripts='[{"src": "/ourfirm/offices/SiteAssets/js/angular.min.js", "priority":0}}
 ]'>
 </script>
</div>

You can download Widget Wrangler and find more information from here:
https://github.com/Widget-Wrangler/ww

There’s also more deeply demonstration available in Channel9 PnP Web Cast:
PnP Web Cast – Introducing Widget Wrangler for SharePoint development

Post-Listing Widget

To demonstrate the use of ww, let’s create a simple widget that lists blog post from SharePoint blog site. Actually, I have built this type of functions multiple times before so this is a real world example. I will use my favored framework AngularJS and SharePoint REST API to accomplish the actual functionality. This way we can create a solid client side solution and have a flexible separation of functionality and presentation. And that should be the starting point for every customization IMO.

Requirements

Get blog post from SharePoint blog site.
Show three latest post and other through pagination.
From each post title (link to post) 365 first characters from the blog post.
Show to order an email alert for new posts.
Show link to RSS feed.

The whole solution can be found from my GitHub repository https://github.com/MikkoKoskinen/WW-Demo-ListPost

From there you can find four files:

WWPostsWPHTML.html – File containing the ww implementation that was saved on the script web part.
listPost.js – The angular application that implements the widget functionality.
listPost.html – The presentation layer of the widget.
listPost.css – Styling of the widget.

I’m also using following frameworks and extensions:

Widget Wrangler Section

<div class="latestPostWP">
 <div posts-element blogSiteURL='' listTitle='Posts' listID='74DF3BE3-5536-45B6-B171-B97C1BCD61D1'></div>

 <script type="text/javascript" src="/ourfirm/offices/SiteAssets/js/pnp-ww.min.js" 
 ww-appname="LatestPostWPApp" 
 ww-apptype="Angular"
 ww-appcss='[{"src": "/ourfirm/offices/SiteAssets/webparts/LatestPost/latestPost.css", "priority":0}]'
 ww-appScripts='[{"src": "/ourfirm/offices/SiteAssets/js/angular.min.js", "priority":0},
 {"src": "/ourfirm/offices/SiteAssets/js/truncate.js", "priority":1},
 {"src": "/ourfirm/offices/SiteAssets/js/dirPagination.js", "priority":1},
 {"src": "/ourfirm/offices/SiteAssets/webparts/LatestPost/latestPost.js", "priority":2}
 ]'>
 </script>
</div>

Above you can see the WW section of the solution that has to be added to the page. This code will handle the loading of the widget. I’m a fan of script web part, so I have placed that code in the snippet section. You could, of course, use other methods of adding the code of course. As we can see, you can control very well on what you want to load and in which order. Key things in the code are.

Everything has to be wrapped inside a div. Div with class ‘latestPostWP’ in our case.
1. This is an important thing to remember because ww won’t work without it.
Ww implementation is done inside the script tag that is calling the library on the source attribute. After that, you can give the necessary settings.
ww-appname = The name of your widget application. In Angular implementation, this has to match with the module name.
ww-apptype = Type of the framework used on the widget. On the time of writing this, only Angular is supported.
ww-appcss = List of CSS style sheet you want to be loaded for the widget. You can give multiple files and control the loading order with the parameter.
ww-appScripts = List of script files sh you want to be loaded for the widget. You can give multiple files and control the loading order with the parameter.

And that’s it. It’s just that simple.

Now, if look at the browser console after page load, you can see that ww has initialized a widget on the page. As you can see our widget has an index number 0. If there were multiple of these elements on the page, all of them would have them own number. This is the power of ww and encapsulating of the widgets.

Presentation

<div class="resultItem announcementItem" dir-paginate="post in posts | itemsPerPage: 2" pagination-id="posts"> 
 <div class="resultTitle"> 
 <a class="" href="{{viewItemURL}}{{post.ID}}">{{post.Title}}</a> 
 </div> 
 <div class="resultContent"> 
 <span class="resultDate" ng-bind="post.PublishedDate | date:'LLLL dd, yyyy'"></span> 
 <br>
 <div class="resultDetail">{{ post.Body | htmlToPlaintext | characters:350 :true}}</div> 
 <div class="resultMore"><a href="{{viewItemURL}}{{post.ID}}">More≫</a></div> 
 </div> 
</div>
<div class="blogActions">
 <div class="action">
 <a class="ms-calloutLink" target="_blank" href="{{listRSSURL}}">
 <span style="height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;" class="s4-clust ms-blog-linkCommandImage">
 <img src="/ourfirm/offices/_catalogs/theme/Themed/4D8112E7/spcommon-B35BB0A9.themedpng?ctag=3" style="position:absolute;left:-236px !important;top:-66px !important;border-width:0px;"></span>&nbsp;<span class="ms-splinkbutton-text">RSS Feed</span></a>
 </div>
 <div class="action">
 <a class="ms-calloutLink" href="{{postAlertURL}}">
 <span style="height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;" class="s4-clust ms-blog-linkCommandImage"><img src="/ourfirm/offices/_catalogs/theme/Themed/4D8112E7/spcommon-B35BB0A9.themedpng?ctag=3" style="position:absolute;left:-236px !important;top:-30px !important;border-width:0px;"></span>&nbsp;<span class="ms-splinkbutton-text">Alert Me</span>
 </a>
 </div>
 <div class="ms-clear"></div>
</div>
<dir-pagination-controls pagination-id="posts"></dir-pagination-controls>

Here you can see the presentation layer. Technically it’s just plain HTML with some Angular code. But I would like to highlight few relevant things, though.

I’m not using the default repeater to show a list of fetched post. The code is using pagination extension for that. This will provide us an easy way to divide the result to a different section. Pagination is done in the first div element “dir-paginate=”post in posts | itemsPerPage: 2″ pagination-id=”posts””. The first setting is the same than in default repeater telling to loop through all the post in posts variable. Next, we will give the amount of visible items per page. Finally, we give a unique id for the pagination element. This way we can connect the repeater, and the pagination action element added as the last element on the widget (dir-pagination-controls div). The extension is also handling all the necessary functions like showing the page count and back and forward links.

Next thing to notice here is that we are modifying the date format for better visibility with ng-bind element.

 ng-bind="post.PublishedDate | date:'LLLL dd, yyyy'"
{{ post.Body | htmlToPlaintext | characters:350 :true}}

Lastly, we are showing a short teaser from post body with element above. We can truncate the text with Angular Truncate filter and give the amount of character shown to the user. True settings tell that also complete words can be cut. htmlToPlaintext is our custom filter that takes out any HTML elements form the body text. More about this soon.

Functionality

(function() {
  angular
    .module('LatestPostWPApp', ['truncate','angularUtils.directives.dirPagination'])
    .filter('htmlToPlaintext', function () {
        return function(text) {
            return  text ? String(text).replace(/&amp;lt;[^&amp;gt;]+&amp;gt;/gm, '') : '';
        };
    })
    .directive('postsElement', function() {
        return {
            restrict : 'EA',
            transclude : false,
            templateUrl: '/ourfirm/offices/SiteAssets/webparts/LatestPost/latestPost.html',
            controller: function ($scope, $log, $q, $http, $attrs) {

                $scope.getEvents = function getEvents() {
                    return $http({
                        method : &amp;quot;GET&amp;quot;,
                        url: _spPageContextInfo.webAbsoluteUrl + &amp;quot;/&amp;quot; + $attrs.blogsiteurl + &amp;quot;/_api/web/lists/GetByTitle('&amp;quot; + $attrs.listtitle + &amp;quot;')/items?$orderby=PublishedDate desc&amp;quot;,
                        headers: { &amp;quot;Accept&amp;quot;: &amp;quot;application/json;odata=verbose&amp;quot; }
                    })
                    .then(function sendResponseData(response) {
                        // Success
                        return {
                            Items: response.data.d
                        }

                    }).catch(function(response) {
                        $log.error('HTTP request error: ' + response.status)
                        return $q.reject('Error: ' + response.status);
                    });
                };

                $scope.getEvents()
                .then(function(data) {
					//Get list items
					$scope.posts = data.Items.results;

					if ($scope.posts.length &amp;gt; 0) {
                        $scope.viewItemURL = _spPageContextInfo.webAbsoluteUrl + &amp;quot;/&amp;quot; + $attrs.blogsiteurl + &amp;quot;/Lists/&amp;quot; + $attrs.listtitle + &amp;quot;/Post.aspx?ID=&amp;quot;;
                        $scope.listRSSURL = _spPageContextInfo.webAbsoluteUrl + &amp;quot;/&amp;quot; + $attrs.blogsiteurl + &amp;quot;/_layouts/15/listfeed.aspx?List={&amp;quot; + $attrs.listid + &amp;quot;}&amp;quot;;
                        $scope.postAlertURL = _spPageContextInfo.webAbsoluteUrl + &amp;quot;/&amp;quot; + $attrs.blogsiteurl + &amp;quot;/_layouts/15/SubNew.aspx?List={&amp;quot; + $attrs.listid + &amp;quot;}&amp;amp;Source=&amp;quot; + _spPageContextInfo.serverRequestPath + &amp;quot;&amp;quot;;
                    }
					else {

					    $scope.noItemsFound = true;
					}
				});
            }
        };
    }); // End directive()
}()); // End IFFE

The functionality of the widget is done as an Angular application. On the first rows of the code, we are giving a name for the application and loading the necessary extension. First thing on the code is a custom filter called htmlToPlaintext. You may call this function with a parameter holding some text content. The function will strip out all HTML elements with a regular expression and return a pure text content. This is used in the presentation layer.

 .directive('postsElement', function() {
 return {
 restrict : 'EA',
 transclude : false,
 templateUrl: '/ourfirm/offices/SiteAssets/webparts/LatestPost/latestPost.html',
 controller: function ($scope, $log, $q, $http, $attrs) {

After this, we have created a directive element named ‘postsElement’ that is will be called on the script web part.

Important things for the directive are to give the right path to the template file and pass-through the variables with $attrs parameter. As we can see from the directive element, we are passing a couple of parameters to be used during the functionality.

blogSiteURL = If the widget is placed on another web than in blog site, you can give the URL with this parameter. URL is used during the REST call to get the post. URL should be given as relative against site collection root.
listTitle = Title of the list where posts are read. The title is used during the REST call to get the post.
listID = Id of the list where posts are saved. This is used in email alert and RSS functions.

In the first section of the code, we are creating a function called ‘getEvents’ that makes and REST API call against SharePoint and gets all the posts from a given list. The call is using the parameters mentioned above to do the call. If the call is successful, the found data items will be returned.

Next, the code will construct a deferred object from the function above. We are catching the promise and saving the found data items to the ‘posts’ variable. Also if some items were found, we would construct few parameters for view item, RSS and alert links. These parameters are used in the template during the construction of the widget.

<div class="resultMore"><a href="{{viewItemURL}}{{post.ID}}">More≫</a></div>

And that’s it. Here you have a relative simple POC of client-side widget that is reading information from SharePoint and using Widget Wrangler framework for better maintenance.

Your Day with Microsoft NextGen Portals

Posted on 06/23/2015 by Mikko Koskinen

Display Template and Current Item Index

Posted on 02/03/2015 by Mikko Koskinen

1 Comment

A little while ago we had request where we were spouse to build a content lift up that displays the latest news pages. Very common and nothing new. The solution should be done with SharePoint OOTB features (be Office 365 compatible), so I decided to use a search and search web parts like I have done a multiple times before. What customer wanted was something like in this wireframe.

(Again here’s the link to source code used in this example: GitHub Mikko Koskinen)

The news post should be listed from newest to oldest. The most recent one should have a title, some text and image when others should show only title and short text from the news body. Because I wanted to keep things light from performance point of view I wanted to accomplish this with one web part only. You could do this with two separated web part for sure.

But if we think of the concept of search web part and display templates we know that we have two elements in template; a control display templates and item display templates. This concept is explained nice in Paul Matthews display template series where the following image can be found. If the concept of display templates and using them is new to you please read Matthews posts first.

Same item template is used to every single item that is returned to us from the index. If so how can we style the first item element differently than others?

After going through basically every single value from ctx.CurrentItem I finally found the answers. The detail I need is not in CurrentItme but in context it self. There is a value for current item id found and we can use that to solve our small problem.

Only thing we need to do is to check what is the idx value of the current item in display template and change the styling based on that.


var shortText = String.format('&lt;div class=&quot;ms-noWrap newsBody&quot; title=&quot;{0}&quot; id=&quot;{1}&quot; &gt;{2}...&lt;/div&gt;',
				$htmlEncode(line2.defaultValueRenderer(line2)), line2Id, line2.toString().substring(0,100));


var index = ctx.CurrentItemIdx;

if (index == 0){
_#--&gt;
	&lt;div class=&quot;mainNews&quot; id=&quot;_#= containerId =#_&quot; data-displaytemplate=&quot;_#= $htmlEncode(dataDisplayTemplateTitle) =#_&quot;&gt;
			&lt;div class=&quot;newsImage&quot; id=&quot;_#= pictureContainerId =#_&quot;&gt;
				&lt;!--#_
				if(!linkURL.isEmpty)
				{
				_#--&gt;
				&lt;a href=&quot;_#= linkURL =#_&quot; title=&quot;_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_&quot; id=&quot;_#= pictureLinkId =#_&quot;&gt;
				&lt;!--#_
				}
				_#--&gt;
					_#= pictureMarkup =#_
				&lt;!--#_
				if(!linkURL.isEmpty)
				{
				_#--&gt;
				&lt;/a&gt;
				&lt;!--#_
				}
				_#--&gt;
			&lt;/div&gt;
			&lt;div class=&quot;newsTitle&quot; id=&quot;_#= dataContainerId =#_&quot;&gt;
				&lt;!--#_
				if(!linkURL.isEmpty)
				{
				_#--&gt;
					&lt;a href=&quot;_#= linkURL =#_&quot; title=&quot;_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_&quot; id=&quot;_#= line1LinkId =#_&quot;&gt;
				&lt;!--#_
				}
				_#--&gt;
					&lt;h2 class=&quot;ms-noWrap&quot; id=&quot;_#= line1Id =#_&quot;&gt; _#= line1 =#_&lt;/h2&gt;
				&lt;!--#_
				if(!linkURL.isEmpty)
				{
				_#--&gt;
					&lt;/a&gt;
				&lt;!--#_
				}
				_#--&gt;
			
				&lt;div class=&quot;newsBody&quot; title=&quot;_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_&quot; id=&quot;_#= line2Id =#_&quot; &gt; _#= line2 =#_&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
&lt;!--#_	
}
else{
_#--&gt;
	&lt;div id=&quot;_#= containerId =#_&quot; data-displaytemplate=&quot;_#= $htmlEncode(dataDisplayTemplateTitle) =#_&quot;&gt;
			&lt;div class=&quot;newsTitle&quot; id=&quot;_#= dataContainerId =#_&quot;&gt;
				&lt;!--#_
				if(!linkURL.isEmpty)
				{
				_#--&gt;
					&lt;a href=&quot;_#= linkURL =#_&quot; title=&quot;_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_&quot; id=&quot;_#= line1LinkId =#_&quot;&gt;
				&lt;!--#_
				}
				_#--&gt;
					&lt;h2 class=&quot;ms-noWrap&quot; id=&quot;_#= line1Id =#_&quot;&gt; _#= line1 =#_&lt;/h2&gt;
				&lt;!--#_
				if(!linkURL.isEmpty)
				{
				_#--&gt;
					&lt;/a&gt;
				&lt;!--#_
				}
				_#--&gt;
			
				_#= shortText =#_
			&lt;/div&gt;
		&lt;/div&gt;
&lt;!--#_	
}
_#--&gt;

After this we can have nice one web part solution with OOTB tools to our problem. You can find the full source from my GitHub (link at the beginning the post).

1 2 3 »

Mikko Koskinen

I am working as a Senior Consultant on Sulava. My primary work is related to Power Platform, SharePoint, and Office 365 solutions. In my projects, I usually am acting as a solution designer (system and solution architecture planning), taking part in customer offer processes, and working as a developer or subject matter expert during the projects.

Verified Services

View Full Profile →

Mikko Koskinen

Power Platform, PowerShell, SharePoint

Cascading Fields in Power Apps Forms – Basics and Few Tips

Main Requirements

Basic Form With Cascading Fields

Saving the Details

Cascading Fields – Next Version

Creating a Feedback Form Part 2 – Connecting the Flow

PowerApp Custom Forms and Flow – Creating a Feedback Form Part 1

Custom List for Feedbacks

PowerApp for Custom Forms

Reading Word File Content from Office 365

Use it in an Application

Reading in Node.js Application

And the Data is?

Use case: List Posts – Using Widget Wrangler and AngularJS in the web part development

What is Widget Wrangler?

Post-Listing Widget

Widget Wrangler Section

Presentation

Functionality

Your Day with Microsoft NextGen Portals

Display Template and Current Item Index

Mikko Koskinen

Verified Services

Follow me on Twitter

RSS

Power Platform, PowerShell, SharePoint

Main Requirements

Basic Form With Cascading Fields

Saving the Details

Cascading Fields – Next Version

Share this:

Like this:

Share this:

Like this:

Custom List for Feedbacks

PowerApp for Custom Forms

Share this:

Like this:

Use it in an Application

Reading in Node.js Application

And the Data is?

Share this:

Like this:

What is Widget Wrangler?

Post-Listing Widget

Widget Wrangler Section

Presentation

Functionality

Share this:

Like this:

Share this:

Like this:

Share this:

Like this:

Verified Services

Follow me on Twitter

RSS