Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.
Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.

SharePoint Designer

SPD Best Practice: Ctrl C+V Quick Backups

To quote Asif Rehmani (@asifrehmani) from www.sharepoint-elearning.com … “SharePoint Designer is like a really sharp knife.   It’s very good at what it does.   You might cut yourself.   But you don’t stop, just act more carefully.”

 

With that lesson well learned over my years with SharePoint customization I must say my favorite trick of all is the simple quick copy/paste backup.   Any time and every time I’m about to jump off a cliff to dive into SPD coding I perform a Quick Backup:

  • Highlight the file
  • Ctrl+C    (copy)
  • Ctrl+V    (paste)
  • Breathe a sigh of relief

Storage is cheap.   Mistakes are not.   Time is one of our most scarce resources.   Buy some insurance with a Quick Backup!  

Hot

 

image
image

_WPQ_ with Javascript for dynamic lookup

If you’re using the trusty CEWP (Content Editor Web Part) to locate the current web part frame on a page you’ll want to consider using the “_WPQ” expression instead of hard coding a number.    Using the Internet Explorer Developer toolbar or Firebug toolbar is a great way to locate <DIV> tags and “ID=” attributes with a single click.

However, don’t be tempted to code in the number.    As you re-order web parts they will changes.    If you add more than one CEWP (export/import) the others will fail.    Use a dynamic token for maximum flexibility.

SharePoint’s rendering engine does a search replace on “_WPQ_” to give it the number of that web part on the page.   It’s a great way to avoid naming conflicts and a trick I’ve used to apply multiple JQuery driven CEWP on the same page.

 

References

image

URL Source= for Thank You on Submit

Many times I’ve been asked to adjust the NewForm.aspx (add record) experience for users to display a custom message after submit.    A “Thank You” page for a survey is a great example.    Other times in request forms people want to show a confirmation or instructions page.

Thankfully the SharePoint product team made this easy for us developers.

Action Steps

  1. Visit the list or library you’d like to tweak
  2. Click on New item to get to /NewForm.aspx
  3. Take a close look at the URL and notice the word “Source=”
  4. We’ll come back to this in a minute
  5. To create a “ThankYou.aspx” page I like to duplicate the “DispForm.aspx” by going into SharePoint Designer
    1. Right click Copy on DispForm.aspx
    2. Right click and Paste
    3. Edit the file to remove the main web part
    4. Rename the file to “ThankYou.aspx”
  6. Edit the part after the equals sign (=) from #3 and replace with a URL you’d like to take people to after submit

 

Often the destination page for #5 above doesn’t yet exist.   So you’ll want to open SharePoint Designer 2007 and create a new ASPX page to hold a “Thank You” message.    For this I always place the ASPX file in the same /Forms/ folder as the list I’m working on.   

Why?    By placing a custom ASPX in the same /Forms/ folder it will be including in any List template (.STP) creation and is easier for future admin and dev staff to locate for troubleshooting.

 

 

image

 

image

 

image

 

image

image

 

image

 

image

 

image

 

image

 

image

 

image

 

image

MOVIE – Random Tip – XSLT

So you want to display a single random item from a SharePoint list?     It’s a common request and a very handy one for visitors.    Give your site a fresh relevant appearance with a dynamic web part.    Web 2.0 requires us site designers to keep pace with visitor expectations.   Let’s get to the fun part.    Here we’ll be using the Data Form Web Part (DFWP) sometimes called the Data View Web Part (DVWP) to present a SharePoint list with XSLT logic for the randomizer and conditional formatting to only show the target record.

Example Code   (random row XSLT.txt  1KB)
Sample Data     (Email Security Tips.xls  13KB)

 

Watch this 4 minute movie clip to see a live demo.     Steps are outlined below also.

 

image

 

  1. Create your list
  2. Open the target page in SharePoint Designer 2007
  3. Open Data View Manage Data Sources
  4. Ctrl+Click the Title and Body columns     (NOTE – other column names work too)
  5. Drag them on the page
  6. Add two CSS classes to the page header

  7. Locate the XSLT header with “<xsl:variable” entries and confirm you have the below three:

  8. Locate the <TR> for starting a new row.   Add the conditional pair below to apply the right CSS class when needed.

  9. Apply extra formatting  (bold, colors, icons) to achieve a unique look for your audience.

© Copyright 2016
@ SPJeff

Return to Top ▲Return to Top ▲