Changing the edit link on SPFx remote list viewer to open in same page

Just had a customer asking how to change the default edit link action icon in the table control of the remote list viewer add-in.

Currently, it checks if the item has an edit link, and then opens it in a new window:

return item.dvp_EditFormUrl && window.open(item.dvp_EditFormUrl) || console.log('this item does not have a valid edit url.');

This customer asked to have the edit item open in the same page/tab.
These customizations and changes are exactly what our product excels in. It is actually very simple to change.

Step 1

Edit the web part. In the table control designer toolbar, click on the gear icon to open the control configuration panel:

Step 2

In the control configuration panel, locate the edit action and click on it to open the action's script editor:

Step 3

In the script editor you can change the icon, tooltip and script that this action runs.

Change the script to the following code to open it in a new window.

if(item.dvp_EditFormUrl) window.location = item.dvp_EditFormUrl + "&Source="+encodeURIComponent(window.location.href);

Note: we added the current window as the Source parameter. This will make the edit form redirect back to this current page when the user is done editing the item.

You are done. Click outside the dialog to close it.

Made a mistake? Want to revert back to default? No worries. Like all other properties, once you change their default value, a "revert to default..." option appears under the new value, allowing you to revert your changes to go back to defaults quickly.

Questions? Suggestions? Feel free to ask here in comments or email our support team.

The power of data view plus web part

Hey guys, thank you for joining me today on my web cast.
Here is the presentation from today’s web cast, if you missed it you can view the recording here.
This presentation talks about KWizCom's data view plus web part, which is an enhanced, more simple and more versatile version of the data view web part. This product does not require SharePoint designer to use, or messing around with XSLT. Simple create, use and reuse templates using simple html, css and javascript, and share with others.
Here are a few samples of what you can do with this amazing web part:

Image slideshow:

Blog:

Few tasks samples:

Let me know what you think

A link to the product page: http://www.kwizcom.com/sharepoint-add-ons/data-view-plus/overview/

Why I say Data View Plus web part is the best we ever made #1

** UPDATE: try this updated version ** 

KWizCom Data View Plus web part is a simple web part that was built with the designer in mind.

It connects to various data sources, lists, list views, enterprise aggregation feature (more source coming), and does something rather simple.

Unlike the SharePoint data view web part that forces you to work with XSL to transform you data into HTML, the Data View Plus takes a different approach, one that I personally think is much more natural for developers and designers alike.

It works with a list of templates, each template has a simple header, footer and body HTML.

You can simply write the HTML you wish to have at the header and footer of the web part, and the body part will be rendered once for each item in the source.

So, how do you get the values from your data into the HTML? Using simple tokens.

{Item:Title:Value} will render the title field value of the item, you can use this token for any field on the current item.

The list of tokens is long, yet very simple to understand. You can find it in the admin guide of the web part on page 23: Download KWizCom Data View Plus administration guide

So, why do I say it is the best we ever made? Since using it, it took me an hour to make an upcoming birthday’s web part.

I build a new data view plus template called: “Upcoming birthdays”, connected it to my birthdays list and here is the result:

Have you ever asked yourself “how do I show upcoming birthdays in SharePoint?” – now you got the answer! Here is a step by step guide on how I did it:

Step 1: Create birthdays list

Create a custom list, use the title to type the person’s name.

Add a choice field called “Month” with options 01, 02…12

Add a choice field called “Day” with options 01, 02… 31

Fill in some birthdays in the list.

Step 2: Install Data View Plus web part

If you haven’t done so already, download and install KWizCom data view plus web part:

http://www.kwizcom.com/sharepoint-add-ons/data-view-plus/download/

Enable the site collection feature and it will create the default template list for you

Step 3: Build the birthdays list template

Visit the “KWizCom Data View Plus Display Layouts” list at your site collection (Not there? Go back to step 2.)

Create a new item in the list with the following data:

(for easy copy, I’ve put this here: http://pastebin.com/ErgixJWv)

1. Title:

Upcoming Birthdays

2. Description:

This shows a simple grouped list with the next 10 weeks of birthdays coming up.
It splits them into groups: Today, tomorrow, this week, or upcoming.

3. EmptyView: (this is the html that will be rendered if no items were found in the source)

<div>There are no upcoming birthdays.</div>

4. Header: (We will use script to transform our data into a birthday list, so the script will go in the header)

   1: <script>
   1:  
   2: KWizCom.DVPWP.Instances['_WPQ_'].Load = function() 
   3: { 
   4:             var numOfWeeksToShow = 10; 
   5:             var monthNames = { 
   6:                 "01": "Jan", 
   7:                 "02": "Feb", 
   8:                 "03": "Mar", 
   9:                 "04": "Apr", 
  10:                 "05": "May", 
  11:                 "06": "Jun", 
  12:                 "07": "Jul", 
  13:                 "08": "Aug", 
  14:                 "09": "Sep", 
  15:                 "010": "Oct", 
  16:                 "011": "Nov", 
  17:                 "012": "Dec", 
  18:             } 
  19:             var groupNames = { 
  20:                 "today": "Today", 
  21:                 "tomorrow": "Tomorrow", 
  22:                 "thisweek": "This week", 
  23:                 "upcoming": "Upcoming" 
  24:             } 
  25:  
  26:             var make2DigitString = function (n) { 
  27:                 return n < 10 ? "0" + n : "" + n; 
  28:             } 
  29:              
  30:             var now = new Date(); 
  31:             var tomorrow = new Date(now.getTime() + 24 * 60 * 60 * 1000); 
  32:             var nextWeek = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000); 
  33:             var endDate = new Date(now.getTime() + numOfWeeksToShow * 7 * 24 * 60 * 60 * 1000); 
  34:             var $list = $kw("#_WPQ_Birthdays"); 
  35:             var $placeholder = $kw("#_WPQ_BirthdaysPlaceHolder"); 
  36:             var currentYear = now.getFullYear(); 
  37:             var nextYear = currentYear + 1; 
  38:             var currentMonth = now.getMonth() + 1;//it is zero based 
  39:             var currentDay = now.getDate(); 
  40:             var tomorrowMonth = tomorrow.getMonth() + 1; 
  41:             var tomorrowDay = tomorrow.getDate(); 
  42:             var tomorrowYear = tomorrow.getFullYear(); 
  43:             var nextWeekMonth = nextWeek.getMonth() + 1; 
  44:             var nextWeekDay = nextWeek.getDate(); 
  45:             var nextWeekYear = nextWeek.getFullYear(); 
  46:             var endMonth = endDate.getMonth() + 1; 
  47:             var endDay = endDate.getDate(); 
  48:             var endYear = endDate.getFullYear(); 
  49:  
  50:             var todayString = currentYear + "-" + make2DigitString(currentMonth) + "-" + make2DigitString(currentDay); 
  51:             var tomorrowString = tomorrowYear + "-" + make2DigitString(tomorrowMonth) + "-" + make2DigitString(tomorrowDay); 
  52:             var nextWeekString = nextWeekYear + "-" + make2DigitString(nextWeekMonth) + "-" + make2DigitString(nextWeekDay); 
  53:             var endDateString = endYear + "-" + make2DigitString(endMonth) + "-" + make2DigitString(endDay); 
  54:             var birthdaysList = new Array(); 
  55:  
  56:             $list.find("li").each(function () { 
  57:                 try{ 
  58:                     var title = $kw(this).attr("data-title"); 
  59:                     var month = parseInt($kw(this).attr("data-month"),10); 
  60:                     var day = parseInt($kw(this).attr("data-day"),10); 
  61:                     var sortableString = currentYear + "-" + make2DigitString(month) + "-" + make2DigitString(day); 
  62:                     if (sortableString < todayString)//this one passed. move it to next year 
  63:                         sortableString = nextYear + "-" + make2DigitString(month) + "-" + make2DigitString(day); 
  64:                     if( sortableString <= endDateString ) 
  65:                         birthdaysList[birthdaysList.length] = sortableString + ":" + title; 
  66:                 } catch (e) { 
  67:                 } 
  68:             }); 
  69:  
  70:             birthdaysList.sort();//now we got sorted birthdays 
  71:             var titleMode = null; 
  72:             var html = ""; 
  73:             for (var i = 0; i < birthdaysList.length; i++) { 
  74:                 var datePart = birthdaysList[i].split(":")[0]; 
  75:                 var titlePart = birthdaysList[i].split(":")[1]; 
  76:                 var dateArr = datePart.split("-"); 
  77:                 var dateString = monthNames[dateArr[1]] + " " + dateArr[2]; 
  78:  
  79:                 var newGroup = false; 
  80:                 if (todayString == datePart) { 
  81:                     if (titleMode != "today")//add title 
  82:                     { 
  83:                         newGroup = true; 
  84:                         titleMode = "today"; 
  85:                     } 
  86:                 } 
  87:                 else if (tomorrowString == datePart) { 
  88:                     if (titleMode != "tomorrow")//add title 
  89:                     { 
  90:                         newGroup = true; 
  91:                         titleMode = "tomorrow"; 
  92:                     } 
  93:                 } 
  94:                 else if (nextWeekString >= datePart) { 
  95:                     if (titleMode != "thisweek")//add title 
  96:                     { 
  97:                         newGroup = true; 
  98:                         titleMode = "thisweek"; 
  99:                     } 
 100:                 } 
 101:                 else { 
 102:                     if (titleMode != "upcoming")//add title 
 103:                     { 
 104:                         newGroup = true; 
 105:                         titleMode = "upcoming"; 
 106:                     } 
 107:                 } 
 108:  
 109:                 if (newGroup) 
 110:                 { 
 111:                     if (html != "") html += "</div>"; 
 112:                     html += "<h3>"+groupNames[titleMode]+"</h3><div>"; 
 113:                 } 
 114:  
 115:                 html += "<p>" + titlePart + "<span style='float:right'>" + dateString + "</span></p>"; 
 116:             } 
 117:             if (html != "") { 
 118:                 html += "</div>"; 
 119:                 $placeholder.append(html); 
 120:                 //$placeholder.accordion({ 
 121:                 //    heightStyle: "content" 
 122:                 //}); 
 123:             } 
 124:             else { 
 125:                 $kw("#_WPQ_NoBirthdaysPlaceHolder").show(); 
 126:             } 
 127: } 
 128: </script> 

 129: <div id="_WPQ_BirthdaysPlaceHolder"></div> 

 130: <div id="_WPQ_NoBirthdaysPlaceHolder" style="display:none">No upcoming birthdays.</div> 

 131: <ul id="_WPQ_Birthdays" style="display:none">

5. Body: (This will be rendered for each item)

   1: <li data-title="{item:Title:value}" data-month="{item:Month:value}" data-day="{item:Day:value}"> 

   2: {item:Title:value} - {item:Month:value} - {item:Day:value} 

   3: </li>

6. Footer: (This will be rendered at the end)

   1: </ul>

Notes:

In the header script, you can find at the beginning options to configure the template, like translating the text and how many weeks of birthdays to show.

Step 4: Add the web part to your page

Now, all you got to do is add the data view plus web part to your page, connect to the birthdays list and select the new template you just created, and you are done!

Now, you see how easy it is to modify my template and brand it to what ever your customers are asking for? You got complete control over the HTML, and no need to mess with XSL.

I would love to hear your comments or thoughts, I will try to build a few more templates and share them here. If you got ideas or requests let me know!