Solved

How to display dynamic msg on SP2010 page

Posted on 2014-01-08
4
535 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
  • 2
  • 2
4 Comments
 
LVL 50

Accepted Solution

by:
teylyn 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

Expert Comment

by:teylyn
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Join & Write a Comment

Suggested Solutions

A question that is asked often, is how to generate sequential numbers in InfoPath Forms. The best way to achieve this is to use a SQL database, along with a stored procedure and a web service to connect Forms Services to the DB. The first thing t…
Pimping Sharepoint 2007 without Server-Side Code Part 1 One of my biggest frustrations with Sharepoint 2007 in the corporate world is that while good-intentioned managers lock down the more interesting capabilities of Sharepoint programming in…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …

707 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now