Link to home
Create AccountLog in
Avatar of Muskie12
Muskie12

asked on

How to display dynamic msg on SP2010 page

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.
ASKER CERTIFIED SOLUTION
Avatar of Ingeborg Hawighorst (Microsoft MVP / EE MVE)
Ingeborg Hawighorst (Microsoft MVP / EE MVE)
Flag of New Zealand image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of Muskie12
Muskie12

ASKER

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?
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

Wow, much appreciated!