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/P
Link 2: /Communications/Contacts/P
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.
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/P
Link 2: /Communications/Contacts/P
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.
Microsoft SharePoint
Last Comment
Muskie12
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Hello,
you can wrap a div around the "ReplaceMe" div and use some CSS styles to make it look like you need to.
Here is some CSS:
We can give the "ReplaceMe" div another background with
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:
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.
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>
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 */
}
We can give the "ReplaceMe" div another background with
#ReplaceMe {
background-color:blue;
color: white;
}
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>";
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;
}
<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>
ASKER
Wow, much appreciated!
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?