asp.net mvc generate pdf report : .Net pdf to image software control cloud windows azure .net class G104_Page-Templating7-part98

OU Campus 
Page Templating  
Page 71 of 84 
p, li, blockquote { 
line-height: 1.4em; 
h1, h2, h3, h4, h5, h6 { 
border-bottom: 1px solid #C9C9C9; 
margin: 0 0 10px; 
padding: 12px 0 10px; 
h1, h2, h3, h4, h5, h6 { 
color: #4B4B4B; 
font-family: Georgia,"Times New Roman",Times,serif; 
text-rendering: optimizelegibility; 
main.css 
h3 { 
font-size: 24px; 
Take note that the body selectors have different classes applied to each, except the first. The 
first one is the default. This is used when classes are not being applied or do not exist in the 
CSS file.  
Note: If a page is not checked out to a user when he/she enters into an editable region, the 
class will not be passed, and the default body selector will be used. It is valuable to check out 
the page prior to editing in order to ensure the proper CSS is being applied to the editor. 
After saving the file, upload it to the /_resources/ou/editor folder and publish it. 
Test the page by editing different editable regions and changing the Page Properties. 
The page is now using the ouc nodes and corresponding CSS. Save this page as a TMPL in 
order to use it to create new pages. Remember that TCFs may need to be updated to point to 
the new TMPL if it has a new name. 
Error processing SSI file
OU Campus 
Page Templating  
Page 72 of 84 
Creating a MultiEdit Template 
The MultiEdit editor allows form-controlled editing for XML and other structured content. 
Administrators can create forms-based templates that present users with an easy-to-follow 
guide for adding content to a structured layout. Templates can include both style-free form fields 
and WYSIWYG content editing areas. MultiEdit is also valuable as it ensures that the same 
node structure is used for every document. 
MultiEdit can be set up to show only the forms-based editor rather than an editable region with 
the WYSIWYG toolbar. It can also be configured so that both editors are available However, it is 
not advised that a MultiEdit region is also editable via the standard editor. Instead, there may be 
a combination of form-type elements and standard editable regions on a given page. 
The form template can be designed so that only a specific type of information can be added. For 
example, content types include text area, radio button, Asset Chooser, check box, drop-down 
selection box, or image inserter. 
MultiEdit tags are a special form of OmniUpdate tag that allows a user to edit multiple content 
regions at one time on a page. A page can have standard tags or a MultiEdit tag, or a 
combination of both. MultiEdit tags are surrounded by OmniUpdate editable region tags with the 
button attribute set to hide. Button attribute controls whether the user is presented the edit 
button in the preview screen or not. Setting the button="hide" will make the region only 
editable via MultiEdit. 
In some cases, the XSL is set to handle the MultiEdit fields individually, and the styling is 
actually controlled by the XSL. This is actually preferred as it allows one file to be updated and 
affect all files using it. In these cases, the ability to have a combination of editable region areas 
and MultiEdit fields on a given page may be hindered. 
Error processing SSI file
OU Campus 
Page Templating  
Page 73 of 84 
When the form is saved, the data is transformed to a desired and predefined layout and with the 
appropriate styling applied. 
To create a MultiEdit PCF, a traditional OU Campus Editor tag is replaced with a MultiEdit tag 
for each of the elements that should be included in the form. These tags can be formatted for 
Error processing SSI file
OU Campus 
Page Templating  
Page 74 of 84 
different types of data input, including text, text areas, assets, radio button, checkbox, and drop-
down selections, as well as an image file chooser. When the user attempts to edit the page, 
he/she will use the orange MultiEdit button at the top of the page instead of an edit button 
traditionally found near the content to be edited: 
. This will open the MultiEdit form 
instead of opening the full WYSIWYG Editor in which traditional pages are edited. 
For a complete list of the attributes available with a MultiEdit tag, see the Page Tagging 
Reference page on the Support site: Development > Page Tagging > Page Tagging Reference. 
Example of a Multi-Edit Content Area 
<content> 
<faculty-image> 
<div style="float:right;font-size:10px;padding:5px;margin:5px;"> 
<div class="portfolio-img"> 
<!-- com.omniupdate.div label="photo" group="Everyone" 
button="hide" --><!-- com.omniupdate.multiedit type="image" prompt="Photo" 
alt="Choose a photo." path="/" lockout="no" --> 
<img width="320" height="180"  title="" alt="" 
src="/_resources/images/sample/portfolio1.jpg"/> 
<!-- /com.omniupdate.div --> 
<span class="portfolio-overlay" 
style="float:right;font-size:10px;padding:5px;margin:5px;height: 180px;left: 
325px;top: 4px;">&nbsp;</span> 
<br /> 
</div> 
<br /> 
</div> 
</faculty-image> 
<desig> 
<h3><!-- com.omniupdate.div label="name" group="Everyone" 
button="hide" --><!-- com.omniupdate.multiedit type="text" prompt="Name" 
alt="Enter your name." -->Richard Higgins, Ph.D<!-- /com.omniupdate.div -->, 
<i><!-- com.omniupdate.div label="title" group="Everyone" button="hide" --
><!-- com.omniupdate.multiedit type="text" prompt="Title" alt="Enter your 
title." -->Professor of Data Intelligence<!-- /com.omniupdate.div --
></i></h3> 
</desig> 
<b><!-- com.omniupdate.div label="education" group="Everyone" 
button="hide" --><!-- com.omniupdate.multiedit type="text" prompt="Education" 
alt="Enter your education information." -->Arizona State University, Ph.D., 
Computer Science<!-- /com.omniupdate.div --></b><br /> 
<h4>Biography</h4> 
<bio><!-- com.omniupdate.div label="biography" group="Everyone" 
button="hide" --><!-- com.omniupdate.multiedit type="textarea" 
--
also the Director of <strong>Biology Technology</strong> at&nbsp;Gallena 
Associate Manager for the Gallena Link-to Learn Initiative and has served as 
Error processing SSI file
OU Campus 
Page Templating  
Page 75 of 84 
the director or co-director of numerous grant projects related to 
technology.</p><!-- /com.omniupdate.div --></bio> 
</content> 
Adding MultiEdit Tags 
For the tutorial, a page has been configured with a couple of MultiEdit fields already in place. 
This tutorial will guide through the process of converting a current standard editable region to 
MultiEdit tags.  
Note: The PCF that will be used is using the commented OmniUpdate tags since the XSL to 
which it is pointing is still configured for the commented tags rather than the individual nodes. 
Start by previewing the new-multiedit.pcf file that is within the /workshop-page-templating 
directory. Then click on Edit and observe the two edit buttons: MultiEdit and a standard editable 
region. 
The image, and title are within the MultiEdit fields, while the rest of the content can be edited in 
the WYSIWYG Editor. 
Error processing SSI file
OU Campus 
Page Templating  
Page 76 of 84 
Current MultiEdit Fields 
Current Editable Region Configuration 
Edit the page using the Source  Editor. Ensure that the code, especially the highlighted portion, 
appears as identified here: 
<?xml version="1.0" encoding="utf-8"?> 
<?pcf-stylesheet path="/_resources/xsl/default.xsl" extension="html" 
title="Web"?> 
<?pcf-stylesheet path="/_resources/xsl/fac_profile.xsl" extension="xml" 
title="XML"?> 
Error processing SSI file
OU Campus 
Page Templating  
Page 77 of 84 
<?pcf-stylesheet path="/_resources/xsl/page2pdf.xsl" extension="pdf" 
alternate="yes" title="PDF"?> 
<document> 
<config> 
<parameter name="pagetype" type="select" group="Everyone" 
prompt="Page Type" alt="Please choose an appropriate page type"> 
<option value="article" selected="false">Article</option> 
<option value="content" selected="true">Content</option> 
<option value="onecolumn" selected="false">One 
Column</option> 
</parameter> 
<!-- ouc:properties --> 
<parameter name="image_teaser" type="select" group="Everyone" 
prompt="Article Image" alt="Do you want to display the article with an image 
teaser "> 
<option value="true" selected="true">Yes</option> 
<option value="false" selected="false">No</option> 
</parameter> 
<parameter name="article_image" type="filechooser" 
for the article" 
path="/">/img/gallena_images/gossling_hall_horizontal.jpg</parameter> 
<parameter name="article_desc" type="text" group="Everyone" 
prompt="Article Description" alt="Please enter a suitable article 
Community Service Honor Roll </parameter> 
<parameter name="author" type="text" group="Everyone" 
Monina</parameter> 
<parameter name="keywords" prompt="Keywords" type="checkbox"  
alt="Pick select the appropriate keywords for the page"> 
<option value="Gallena"  selected="true">Gallena</option> 
<option value="GU"  selected="true">GU</option> 
<option value="Gallena University"  selected="false">Gallena 
University</option> 
<option value="Why Choose Gallena"  selected="true">Why Choose 
Gallena</option> 
<option value="Undergraduate"  
selected="true">Undergraduate</option> 
<option value="Graduate"  selected="false">Graduate</option> 
</parameter> 
<!-- /ouc:properties --> 
</config> 
<metadata> 
<!-- ouc:properties --> 
<parameter name="keywords" type="checkbox" group="Everyone" 
prompt="Keywords" alt="Select keywords that relate to this page."> 
Error processing SSI file
OU Campus 
Page Templating  
Page 78 of 84 
<option value="academics" selected="false">Academics</option> 
<option value="admissions" selected="false">Admissions</option> 
<option value="matriculation" 
selected="false">Matriculation</option> 
<option value="athletics" selected="true">Athletics</option> 
<option value="sports" selected="true">Sports</option> 
<option value="basketball" selected="true">Basketball</option> 
<option value="football" selected="true">Football</option> 
<option value="volleyball" selected="true">Volleyball</option> 
<option value="tennis" selected="true">Tennis</option> 
</parameter> 
<meta name="Description" content="Gallena University was recently named 
/> 
<meta name="Keywords" content="" /> 
<meta name="Author" content="Michael Monina" /> 
<!-- /ouc:properties --> 
</metadata> 
<!-- ouc:properties --><title>Carol Clements</title><!-- 
/ouc:properties --> 
<content> 
<faculty-image> 
<div style="float:right;font-size:10px;padding:5px;margin:5px;"> 
<div class="portfolio-img"> 
<!-- ouc:div label="photo" group="Everyone" button="hide" -
-><!-- ouc:multiedit type="image" prompt="Photo" alt="Choose a photo." 
path="/" lockout="no" --> 
<img width="320" height="180"  title="" alt="" 
src="/_resources/images/sample/portfolio1.jpg"/> 
<!-- /ouc:div --> 
<span class="portfolio-overlay" 
style="float:right;font-size:10px;padding:5px;margin:5px;height: 180px;left: 
325px;top: 4px;">&nbsp;</span> 
<br /> 
</div> 
<br /> 
</div> 
</faculty-image> 
<desig> 
<h3><!-- ouc:div label="name" group="Everyone" button="hide" --
><!-- ouc:multiedit type="text" prompt="Name" alt="Enter your name." -->Carol 
Clements<!-- /ouc:div -->, <i><!-- ouc:div label="title" group="Everyone" 
button="hide" --><!-- ouc:multiedit type="text" prompt="Title" alt="Enter 
your title." -->Professor of Marketing and Public Relations<!-- /ouc:div --
></i></h3> 
</desig> 
Error processing SSI file
OU Campus 
Page Templating  
Page 79 of 84 
<!-- ouc:div label="content" group="Everyone" button="700" --><!-- 
ouc:editor csspath="/_resources/ou/editor/twocolumn_content.css" 
cssmenu="/_resources/ou/editor/styles.txt" width="1042" --> 
<strong>Arizona State University, Ph.D., Chemistry</strong><br /> 
<h4>Biography</h4> 
<bio><p>Director for the Gallena Center for Distance Education. 
Dr. Harris is also the Director of <strong>Biology Technology</strong> 
at&nbsp;Gallena University. Prior to these positions, Dr. Harris taught 
chemistry at Arizona State for over 10 years. Before coming to 
-
to 
Learn Initiative and has served as the director or co-director of numerous 
grant projects related to technology.</p></bio> 
<h4>Publications</h4> 
<ul> 
<li>Harris, Greg C. and John Sampson. "Gian Chloroplast Isolation." 
Macrochemical Journal. 41(1-2), 875-350 (2008).</li> 
and Photobiology 39(2), 909-7195 (2008).</li> 
</ul><!-- /ouc:div --> 
</content> 
</document> 
It is possible that this may appear differently if at some point this page was updated. To create 
the MultiEdit fields and see the expected styling, make sure that, at a minimum, the node 
structure matches. 
The available attributes for MultiEdit are similar to those of variables and parameters. The three 
required or, in the case of alt, strongly suggested fields are displayed below. For a complete list 
of attributes see the Support site, and navigate to Development > Page Tagging > Page 
Tagging Reference. 
Attribute Name Syntax Example 
Description 
type 
type="text” 
Required 
Defines the type of field. Can be: 
text, textarea, image, radio, checkbox, 
select, asset 
The attributes may be used in conjunction 
with other attributes. For instance, textarea 
may be used with editor to allow for a mini-
WYSIWYG Editor to be used. 
prompt 
prompt=”Education” 
Required 
Provides a label for the user, defining the 
field. 
Error processing SSI file
OU Campus 
Page Templating  
Page 80 of 84 
Attribute Name Syntax Example 
Description 
alt 
alt=”Enter the name of the 
school you attended.” 
Provides instructional text to the user. 
To update the current editable region and convert the nodes into MultiEdit fields: 
1. Remove the current div tag with label="content" and its corresponding editor tag. 
2. Wrap the education field in a div tag with the label="education" and a MultiEdit tag 
with type="text". (See the code example for all attribute information.) Be sure to put 
the div and MultiEdit tags within the <strong> tags. 
3. Wrap the biography field in a div tag with the label="biography" and a MultiEdit tag 
with type="textarea". Be sure to put the div and MultiEdit tags within the <bio> 
tags. 
4. Wrap the publications field in a div tag with the label="publications" and a 
MultiEdit tag with type="textarea". Be sure to put the div and MultiEdit tags after the 
<h4> tags. 
The button should be hidden for each of the div tags. 
<faculty-image> 
<div style="float:right;font-size:10px;padding:5px;margin:5px;"> 
<div class="portfolio-img"> 
<!-- ouc:div label="photo" group="Everyone" button="hide" -
-> 
<!-- ouc:multiedit type="image" prompt="Photo" alt="Choose a photo." 
path="/" lockout="no" --> 
<img width="320" height="180"  title="" alt="" 
src="/_resources/images/sample/portfolio1.jpg"/> 
<!-- /ouc:div --> 
<span class="portfolio-overlay" style="float:right;font-
size:10px;padding:5px;margin:5px;height: 180px;left: 325px;top: 
4px;">&nbsp;</span> 
<br /> 
</div> 
<br /> 
</div> 
</faculty-image> 
<desig> 
<h3> 
<!-- ouc:div label="name" group="Everyone" button="hide" --> 
<!-- ouc:multiedit type="text" prompt="Name" alt="Enter your name." --> 
Carol Clements 
<!-- /ouc:div -->,  
<i> 
<!-- ouc:div label="title" group="Everyone" button="hide" --> 
<!-- ouc:multiedit type="text" prompt="Title" alt="Enter your title." -
-> 
Professor of Marketing and Public Relations 
<!-- /ouc:div --> 
Error processing SSI file
Error processing SSI file