Solved

How to display dynamic msg on SP2010 page

Posted on 2014-01-08
4
610 Views
Last Modified: 2014-01-09
I am looking for a way to have a dynamic msg display in its own Content section on a page in a Sharepoint 2010 site.

Currently, I have a page with a Content section and a Quest webpart. The content section has a table with multiple hyperlinks and once a hyperlink has been clicked, the Quest
webpart will display a table of contacts from an SP list based on a parameter in the hyperlink.

Ex.

Links in the table in Top Content section:
==========================================
Link 1: /Communications/Contacts/Pages/Contacts.aspx?Area=DCP
Link 2: /Communications/Contacts/Pages/Contacts.aspx?Area=FTS


CAML Filter in Quest Webpart:
=============================
  <Eq>
    <FieldRef Name="Area" />
    <Value Type="Choice" Source="HttpParameter" SourceName="Area" />
  </Eq>


Result from clicking on the first link:
=============================
The Quest webpart is configured to display several fields from a contacts list in SP. By clicking on the first link in the example, all records from the Contacts list that have the value of "DCP" in the Area field will be displayed in the Quest listview webpart.


Desired Result:
===============
To also let the user know which area's contacts are being displayed.

Without impacting the current setup, I would like to have a dynamic msg inserted in its own content section between the top content section and the webpart. This new content section would potentially have some script that dynamically displays a msg based on the area's contacts being displayed, by making use of the html parameter in the link. Something like "The list of contacts from the <Area> area is displayed below" where <Area> is replaced with the HttpParameter value from the link in the table.


I realize I could accomplish this by creating a different page for each link(area) and then configuring its webpart title accordingly but I would have a dozen pages to start and more in the future. Undesirable.
0
Comment
Question by:Muskie12
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 50

Accepted Solution

by:
Ingeborg Hawighorst (Microsoft MVP / EE MVE) earned 500 total points
ID: 39767354
Hello,

I'm not quite sure I follow, because I don't know what a "Quest webpart" is,  but you can easily create / show / hide text inside a div with JavaScript or even easier with jQuery.

Create a Content Editor Web Part, edit its html to add a div with an ID and then manipulate the div with JavaScript and replace the text of that div dynamically, based on the other parameters that are found on your page or in the URL.

For example, in a purely HTML context, this will work:

<html>

<head>
<script type="text/javascript">
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}


</script>

</head>
<body>
<div id="ReplaceMe">This text will be replaced</div>
<script type="text/javascript">
/* this gets the URL parameter */
      var theParameter = (getParameterByName("Area"));
// just making sure that we're getting the parameter all right. Delete next row if no longer required.
      alert(theParameter);
// Replace the inner text of the div with the ID ReplaceMe and put in the text specified below.
      document.getElementById("ReplaceMe").innerHTML="This Information is about " + theParameter;
      

</script>
</body>

Save that code in a *.txt  file and upload to a document library in your site.

On your page, add a Content Editor Web Part. Instead of entering text, edit the web part properties and link to the text file in the SharePoint library. Save and refresh the page.



cheers, teylyn
0
 

Author Comment

by:Muskie12
ID: 39768439
Hey teylyn,

A Quest WP is a flexible 3rd party WP that we use to display content from one or more lists in SP based on various conditions (fields) in those lists. I'm sure we are using only a small part of its potential.

Due to the fact I know next to nothing about either JS or JQuery and having worked sparingly with CEWPs, I'm shocked I got this to work first time.

I'd really like to be able to add a line space after the msg and change the colour of either part or all of the displayed msg (which I changed to:
innerHTML="The list of available contacts for the " + theParameter + " area is listed below.";

Would you mind including the extra code - only if its not too much trouble?
0
 
LVL 50
ID: 39769200
Hello,

you can wrap a div around the "ReplaceMe" div and use some CSS styles to make it look like you need to.

<div class="wrapper">
	<div id="ReplaceMe">This text will be replaced</div>
</div>

Open in new window

For example, the "wrapper" div can have a different background color than the "ReplaceMe" div, and it can have padding, which will push the "ReplaceMe" div away from the borders.

Here is some CSS:

.wrapper {
	width: 250px;
	background-color: red;
	padding: 10 5 20 10; 
	/* the order of the numbers is top, right, bottom, left */
}

Open in new window

This makes the wrapper div 250 pixels wide, with a red background. Inside the wrapper, there is a padding of 10 pixels at the top, 5 to the right, 20 at the bottom and 10 to the left.

We can give the "ReplaceMe" div another background with

#ReplaceMe {
	background-color:blue;
	color: white; 
}

Open in new window

The background is blue, the text color is white. Since we have not specified a width or height, it will be as wide as the wrapper div, but pull away from the wrapper div boundaries by the padding set in the wrapper div.

We can also apply different coloring or other attributes to the actual parameter text. We can apply a CSS class to the parameter text by changing the last line of JavaScript code to this:

document.getElementById("ReplaceMe").innerHTML="This Information is about <span class='parameter'>" +  theParameter + ".</span>";

Open in new window

The important bit is this one: <span class='parameter'>" +  theParameter + ".</span>"

Now we can use some CSS to style the parameter class. Let's say with yellow background, black text, font size a bit bigger than the normal font and bold.

.parameter {
	background-color: yellow;
	color: black;
	font-size: 1.2em;
	font-weight: bold;
}

Open in new window

All together this will look pretty ugly, with glaring colors but all the CSS is in one place and you can easily change the colors to suit the color scheme of your site. Here is the whole code with the CSS block in the HTML header.

<html>

<head>
<script type="text/javascript">
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}


</script>
<style type="text/css">
.wrapper {
	width: 250px;
	background-color:red;
	padding: 10 5 20 10; 
	/* the order of the numbers is top, right, bottom, left */
}
#ReplaceMe {
	background-color:blue;
	color: white; 
}
.parameter {
	background-color: yellow;
	color: black;
	font-size: 1.2em;
	font-weight: bold;
}
</style>
</head>
<body>
<div class="wrapper">
	<div id="ReplaceMe">This text will be replaced</div>
</div>
<script type="text/javascript">
/* this gets the URL parameter */
      var theParameter = (getParameterByName("Area"));
// just making sure that we're getting the parameter all right. Delete next row if no longer required.
      alert(theParameter);
// Replace the inner text of the div with the ID ReplaceMe and put in the text specified below.
      document.getElementById("ReplaceMe").innerHTML="This Information is about <span class='parameter'>" +  theParameter + ".</span>";
      

</script>
</body>

Open in new window

0
 

Author Comment

by:Muskie12
ID: 39769236
Wow, much appreciated!
0

Featured Post

Migrating Your Company's PCs

To keep pace with competitors, businesses must keep employees productive, and that means providing them with the latest technology. This document provides the tips and tricks you need to help you migrate an outdated PC fleet to new desktops, laptops, and tablets.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When installing SharePoint 2010 RTM I came across a strange error, I was getting timeouts during the installation. I searched the web and found the best solution to be found here (http://social.msdn.microsoft.com/Forums/en-US/sharepoint2010genera…
In case you ever have to remove a faulty web part from a page , add the following to the end of the page url ?contents=1
This is a high-level webinar that covers the history of enterprise open source database use. It addresses both the advantages companies see in using open source database technologies, as well as the fears and reservations they might have. In this…
If you're a developer or IT admin, you’re probably tasked with managing multiple websites, servers, applications, and levels of security on a daily basis. While this can be extremely time consuming, it can also be frustrating when systems aren't wor…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question