How to present data

Topics: XSLT
Nov 2, 2011 at 9:52 AM

OK. I'm having real problems with something that probably has a simple solution.

I want to create a data type then present the data on a page. I've used other CMS systems and never have a problem but I can't get it to work in Composite.

I can add a datatype, but even at this stage I have no idea what I should be putting in the type namespace field.

I can then see that my datatype has resulted  a folder in the functions section but don't really know why it has ended up where it is or how to call it.

When I'm creating page content I can sometimes call the xslt function but no data content is displayed.

I've looked at tutorials but they seem to be missing some steps. I'm looking for a tutorial that takes me through the process step by step, without assuming that I'm familiar with xslt or xml.

Thanks

Steve

Nov 2, 2011 at 12:46 PM

what do you know? you don't have to use xslt to present data, asp.net usercontrols or razor is also a perfect way to do it.

Nov 2, 2011 at 1:31 PM

Hello Burning Ice,

I don't know much at all, though I have used other CMS systems (Umbraco and Modx) to present data.

I am interested in using Composite C1 for a website. But I would need to be able to present data. I was able to do it in Umbraco but things  work differently in Composite C1.

I'm not a coder and am looking for a solution that is fairly straight-forward. I have assumed that it would be a case of palcing a data function on a page but this does not shoe me any data. All I get is something that says 'Insert parameter here'.

I don't know anything about Razor but am open to the idea of it. I'm really looking for a solution that does not require me to code, though I can understand a little. It would be great if there were a tutorial that walked me through every step of the process. I just can't find one.

Your guidance would be appreciated.

Steve

 

Nov 2, 2011 at 2:15 PM

If you don't want to write any xslt, razor or c# code you should look at the Visual Functions that lets you output data fields in a completely WYSIWYG like environment http://users.composite.net/C1/Functions/A-Guide-to-Visual-Functions.aspx

Coordinator
Nov 2, 2011 at 2:16 PM

Hello, stevefreeman

Try to use Visual functions. It is a quick and convenient way of presenting dynamic data of a specific type on a page. Creating a Visual function requires no specific skills in programming or editing markup. Fore more details read  this article - http://users.composite.net/C1/Functions/A-Guide-to-Visual-Functions.aspx

Nov 2, 2011 at 2:48 PM

Thanks Guys. That was exactly what I was looking for. Much Appriciated.

Nov 2, 2011 at 3:17 PM

Ok. I've got that working just fine. I'm now wondering how to create a page with additional data fields.

I want to be able to create 'people profile' pages. Ecah pach would be able to display normal html content with pics etc. There would also be additional data that is attached to each page, e.g first name  and second name etc.

Then I want to be able to generate a list of these people with a link to each profile. this is where I am aiming to get to. The visula function helps but I'm still not sure how to acheive the above.

 

Steve

Nov 3, 2011 at 10:58 AM

i packed up a running website that you can download,unpack and run in IIS express. In here i added a Person datatype,created to instances and added two pages for listing and showing person details

http://dl.dropbox.com/u/153053/Website.7z

the functions for it are located in ~/App_Data/Razor/Person/ list.cshtml and details.cshtml.

try giving it a go

Nov 9, 2011 at 9:48 AM

Thanks to all who have contributed to this. My understanding of Composite has grown but I am still really stuck on this problem and getting no further.

I can create a data list and present all the data on a page in a table. What I want to do is to list just one list of the same field which links to a page presentation of the whole record, like how a news page would work.

So you see a list of the headlines on one page, each headline links to the main article. I am hoping that this is acheivable using the UI as I don't know any coding.

I must be close as I can do all the stuff like adding a data type through to presenting the data in table format... but no more.

I've been looking everywhere for a tutorial but can't find anything.

Help!!

Coordinator
Nov 9, 2011 at 11:31 AM

This guide is useful: http://docs.composite.net/XSLT/LinktoDetailFunction

Nov 9, 2011 at 11:50 AM

Thanks Mawtex,

 

I’ve seen that but it’s still too advanced for me. I’m looking for a step by step guide starting right from the start. Most of the composite tutorials I see seem to assume that the reader is quite advanced with a good background in Razor or XSLT. I can't even read some of the screenshots to see what is going on.  Do you think that Compiste is more for advanced users as I'm starting to wonder if I'm out of my depth. I have used MODx and Umbraco without too much problem but wanted to try Composite as it has some features that look quite good for a project I am working on.

Steve

Nov 9, 2011 at 12:44 PM

@steven I have a hard time believing you can do what you're asking for in Umbraco without having to write any line of Xslt or Razor. Actually i can't think of any CMS where you can do what you're asking for without writing any line of code. You simply HAVE to write some kind of template that can take an input, it this case a datatype or a list of datatypes, and transform that into html. Drag'n drop can only take you so far like you've seen with Visual Functions

Nov 9, 2011 at 1:07 PM

Hello Burning Ice, Thank you for replying so quick and continuing to help me on this. Yes you are right about Umbraco, some code is needed but I was able to work it out from following a tutorial. I think that is what I am trying to say about Composite. I know it can be done and I feel I'm only a couple of steps away from being able to do it. It's just that I'm very much a non-coder and can only get to grips with things if I can see how to do things from the very start, using the basics. I am able to present a table of data it's just the next step I'm stuck on. Composite does look very good for what I have in mind. I particularly like the end-user interface.

Thanks For all of your help.

Steve

 

Coordinator
Nov 9, 2011 at 2:15 PM

Steve, let us construct a sample and get back to you.

Nov 9, 2011 at 3:33 PM

Hey Thanks Mawtex. I'll look forward to it.

Steve

Coordinator
Nov 10, 2011 at 8:50 AM

Will try to write Step by Step tutorial for "Link to Details" example.

  Let consider you have Global Data type named MyNamespace.UserProfile with next fields:
 -  FirstName (Field type = String)
 -  SecondName (Field type = String)
 -  Image (Field type = Data reference; Reference type = C1 Image File)

1. Create a C1 page where you wish to display list with links to the UserProfile details, f.e named Users. (go to Content perspective -> Add page)

XSLT APPROACH:

2. Go to Functions perspective -> XSLT functions -> right click -> Add XSLT function -> specify Name and Namespace (f.e.  Name="UserProfilesList" ; Namespace="MyNamespace") -> press Ok button

3. The function needs to return links to the UserProfile details page so here we need to add  an input parameter called UserProfilesDetails which holds that URL:
- on the "Input Parameters" tab -> press "Add New" -> specify: Parameter name = UserProfilesDetails; Parameter type = Data reference<C1 Page>;  also specify some Test value = <select some page> 

4. For each created Global data type C1 generates functions to get your data in XML. So on the "Functions call" tab -> press "Add New" -> locate MyNamespace/UserProfile/GetUserProfileXml -> locate parameter  Selected fields -> on the right window locate Parameter value -> Edit selections -> select what fields you wish to be selected -> f.e. select Id, FirstName and SecondName fields. Also you can order you data by some field: locate parameter Order by -> on the right window locate Parameter type-> select Constant -> Parameter value -><select some field>

5. On the "Preview" tab you can see the Input (at the top) and Output (at the bottom) of your XSLT 

6. On the "Template" tab you create your Output based on your Input, so here you should have some XSLT knowledge. Below is an example of the Template tab  how to output list with links to the details page(note that the links contain Query parameter named "id"):

 

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:in="http://www.composite.net/ns/transformation/input/1.0" xmlns:lang="http://www.composite.net/ns/localization/1.0" xmlns:f="http://www.composite.net/ns/function/1.0" xmlns="http://www.w3.org/1999/xhtml" exclude-result-prefixes="xsl in lang f">
	
	<xsl:variable name="detailspage" select="/in:inputs/in:param[@name='UserProfilesDetails']" />

<xsl:template match="/"> <html> <head></head> <body> <ul> <xsl:apply-templates select="/in:inputs/in:result[@name='GetUserProfileXml']/UserProfile" /> </ul> </body> </html> </xsl:template> <xsl:template match="UserProfile"> <li> <a href="~/page({$detailspage})?id={@Id}"> <xsl:value-of select="@FirstName" />&#160; <xsl:value-of select="@SecondName" /> </a> </li> </xsl:template> </xsl:stylesheet>

 

7. So you have created the UserProfilesList XSLT which renders list with links to the details page with query parameter. So go to the page "Users" (created in Step 1) -> edit content -> and insert this XSLT:  Insert -> Function -> locate MyNamespace/UserProfilesList ->  specify value for the input parameter UserProfilesDetails (created in Step 3) - you can select the same Users page (created in Step 1) - check out  the page preview - you should see the list of links...

8. Now need to create a function to show user details. For this you can use Visual function and when insert this function on the page just specify the filter to show only 1 item based on query parameter "id":
 a)
go to Functions -> Visual functions -> Add visual function -> select Data type = UserProfile -> Next button -> Function name = UserProfileDetails -> press Finish.
 b) create Visual Layout - Save

9. Now you need to insert this function on the user details page. (In Step 7 you specified this page in input parameter UserProfilesDetails
Locate this page  -> edit Content -> Insert -> Function -> locate MyNamespace/UserProfileDetails (visual function created in step 8)-> specify next values for the Function properties:
 - List Filter ->  Parameter type = Function -> locate MyNamespace/UserProfile/FieldPredicatesFilter -> select "Id filter" = Function -> locate function Composite/Utils/Predicates/GuidEquals - > The value to compare with = Function -> locate function Composite/Web/Request/QueryStringGuidValue -> Parameter name = "id"
 - Item list length = 1

10. You are done

Try out his example, later I will try to describe step by step tutorial how to use Razor approach...

Nov 10, 2011 at 9:48 AM

Thanks Inna,

I'm going to give it a go today. Many thanks for going to all this trouble.

Steve

Coordinator
Nov 10, 2011 at 9:54 AM
Edited Nov 10, 2011 at 10:55 AM

RAZOR APPROACH:

So you have Global Data type named MyNamespace.UserProfile with next fields:
 -  FirstName (Field type = String)
 -  SecondName (Field type = String)
 -  Image (Field type = Data reference; Reference type = C1 Image File)

1. Create a C1 page where you wish to display list with links to the UserProfile details, f.e named Users. (go to Content perspective -> Add page)

2. Install package Contribution.CompositeC1Contrib.RazorFunctions: go to System perspective -> Packages -> Available packages -> locate this package and install it.

3. Locate folder ~/App_Data/Razor/ and create there the folder f.e named UserProfile

4. Create ~/App-Data/Razor/UserProfile/List.cshtml file with next content:

@inherits CompositeC1Contrib.RazorFunctions.CompositeC1WebPage
@using Composite.Data;
@using Composite.Data.Types;
@using CompositeC1Contrib.RazorFunctions;
@functions {
    // C1 Function parameters defined below...
	[FunctionParameter("User Profile details page", "")]
	public DataReference<IPage> UserProfilesDetails { get; set; }
	}
@{
	var users = Data.Get<MyNamespace.UserProfile>();
	
}

<ul>
	@foreach (var user in users)
 {
		<li><a href="@Html.C1().PageUrl(UserProfilesDetails.Data)?id=@user.Id">@user.FirstName	@user.SecondName</a></li>      
 }
</ul>

5. Create ~/App-Data/Razor/UserProfile/Details.cshtml file with next content:

 

@inherits CompositeC1Contrib.RazorFunctions.CompositeC1WebPage
@using Composite.Data;
@using CompositeC1Contrib.RazorFunctions;
@{
	
	var userId = Request.QueryString["id"] != null ? Guid.Parse(Request.QueryString["id"]) : Guid.Empty;
	var user = Data.Get<MyNamespace.UserProfile>().Where(p => p.Id == userId).SingleOrDefault();
}
@if (user != null)
{ 
	<b>First Name:</b> @user.FirstName
	<br />
	<b>Second Name:</b> @user.SecondName
	<br />
	<b>Image:</b>
	<img alt="image" src="@Html.C1().MediaUrl(user.Image)" />
}

6. Go to the page created in step 1 -> edit Content -> Insert -> Function -> locate function created in step 4: UserProfile/List -> specify the value for the input parameter "User Profile details page"
this is a page where you will insert the  UserProfile/Details function created in step 5

7. Insert the UserProfile/Details function created in step 5 to the user profile details page.

8.  You are done

Try out this Razor example

Nov 10, 2011 at 10:03 AM
Edited Nov 10, 2011 at 10:41 AM

:D so nice to see examples in razor as well... yir, kudos to Inna :)

Btw Inna, about pageUrls and Media urls you can do like this

 

<li>
   <a href="@Html.C1().PageUrl(UserProfilesDetails.Data)?id=@user.Id">@user.FirstName @user.SecondName</a>
</li>

<img alt="image" src="@Html.C1().MediaUrl(user.Image)" />

this way you don't need to know about the ~/page(id) or ~/media(id) scheme and your safe its being changed again in the future :)

 

Coordinator
Nov 10, 2011 at 10:14 AM
burningice wrote:

:D so nice to see examples in razor as well... yir, kudos to Inna :)

no no,  kudos to burningice :)

Coordinator
Nov 10, 2011 at 10:56 AM
Edited Nov 10, 2011 at 10:56 AM
burningice wrote:

Btw Inna, about pageUrls and Media urls you can do like this

<li> <a href="@Html.C1().PageUrl(UserProfilesDetails.Data)?id=@user.Id">@user.FirstName @user.SecondName</a> </li> <img alt="image" src="@Html.C1().MediaUrl(user.Image)" />
this way you don't need to know about the ~/page(id) or ~/media(id) scheme and your safe its being changed again in the future :)

 

Thank you! corrected my examples

Nov 10, 2011 at 11:05 AM

Hello Inna,

I had tried to follow your XSLT instructions twice but I am confused in paragraph 3. This is what I don't understand

also specify some Test value = <select some page> 

I'm not sure how to input this as it does not seem to offer me the option that you describe.

When I first tried it, I decided to bypass this and see what happed, but struck another problem in para 7 when I saw that this step seem to rely on a valid input of the above.

Steve

Coordinator
Nov 10, 2011 at 11:13 AM
Edited Nov 10, 2011 at 11:25 AM

>>I had tried to follow your XSLT instructions twice but I am confused in paragraph 3. This is what I don't understand

>>also specify some Test value = <select some page>

Check out this screenshot - http://funkyimg.com/u2/918/889/TestValue.png

 

>> When I first tried it, I decided to bypass this and see what happed, but struck another problem in para 7 when I saw that this step seem to rely on a valid input of the above.

When you insert this function on the page, you should specify value for this input parameter UserProfilesDetails  and select the page where you will insert visual function MyNamespace/UserProfileDetails
XSLT: Step 7 - see screenshot - http://funkyimg.com/u2/921/702/SpecifyInputParameter.png



        
    
Nov 10, 2011 at 1:03 PM

Inna,

I must be really dumb. I had already got to the page that you show me on the screenshot but still don't know what you mean when you say I should specify a value <select some page>

When I click the tab it presents me with a funtion icon. It does not seem to be prompting me for any kind of value.

Steve

Nov 10, 2011 at 3:18 PM

Here's what I get when I try to specify a Test Value... I can't see anywhere to specify a value <select some page>

 

[URL=http://funkyimg.com][IMG=http://funkyimg.com/u2/667/840/composite.jpg][/URL]

 

Nov 10, 2011 at 3:19 PM

Here it is again...

http://funkyimg.com/viewer.php?img=/2/667/840/composite.jpg

 

Nov 10, 2011 at 3:41 PM

Have you tried pressing the "Add new" button? Im sure it won't go an explode your computer :)

Coordinator
Nov 11, 2011 at 6:41 AM
stevefreeman wrote:

Here it is again...

http://funkyimg.com/viewer.php?img=/2/667/840/composite.jpg

 

Did you set Parameter type = Data reference<C1 Page> for this input parameter UserProfilesDetails?
Test value -> Specify test value -> if the left window is empty press Add New -> locate Composite.Data.Types.IPage.GetDataReference -> Key Value = <select some page> - see screenshot - http://funkyimg.com/viewer.php?img=/2/913/734/SelectPage.png


Nov 11, 2011 at 7:28 AM

Thanks Burning Ice and Inna. You see what I mean when I say I'm the kind of person that needs a step by step guide.

I'm away today but will be working through this again next week.

Thanks for bearing with a non-coder to help me work through this.

 Iguess you must be waving your arms around in frustration at me.

 

Coordinator
Nov 11, 2011 at 8:19 AM

Steve, if we can find ways to make non-developers more productive in Composite C1 we would really love to do so, and having an opportunity to see what works / does not work is a great opportunity for us.

So please keep pushing on this topic - no frustrations here ;-)

What was your impression with Visual Functions? Beside from not allowing "list view --> detail view" how did it work for you?

Nov 15, 2011 at 8:56 AM

Hi Mawtex,

I'm glad that you don't mind people like me who are keen to learn. I've just ried to go through the steps above... again but it now seems that the pictures thatInna posted are unavailable.

I think that karma does not want me to suceed on this.

I think I'll wait for someone to make a video of it as I think that's the only way I'm going to follow what is happening.

Thanks to all.

 

STeve

Coordinator
Nov 15, 2011 at 9:52 AM

Hello, Steve

Please, check out this video - http://www.screenr.com/mmFs - XSLT APPROACH: - List to Details example

Nov 15, 2011 at 11:28 AM

Hello Inna and everyone else who has helped me,

Thanks for doing that video. I actually got much further than before. I was able to display the list that I wanted, but did not follow the tutorial quite to the end as I got totally lost with what was happening. The pace of your video is way too fast for a non-coder like me.

I just realised that I am totally out of my league here. I know that I could have paused it, I was pausing it all along anyway. It just started to fry my brain a bit. You guys are clearly experts at what you do and operate at a much higher level and speed than people like me.

I can see that Composite C1 looks like a great product but I think that the learning curve for me is far too high. Your tutorials will make imediate sense to developers but I think it would be good if the Composite team were able to adapt their tutorials for keen amateurs like me.

There's a big bunch of us out there who could make good use of Composite if only it's functions and tutorials were more straight-forward for us to follow.

At the moment I just feel that composite C1 seems too technical to get my head around.

Thanks

Stephen Freeman

Nov 30, 2011 at 11:27 PM

Hi,

I've created a Page Data Type List page which lists data items with a link to a details page similar to above. Everything works fine and the list elements link to the correct detail page.

What I'm trying to do now is, from a different page, is have a link which links to one of the details page using the normal visual content area link properties dialog.

Clicking the arrow in the URL input box brings up the appropriate page tree structure, however when I navigate the page -> data folder, the data items are unselectable.

 

I could obviously go the the actual detail page I want to link to and copy the URL to enter in the dialog, but of course being able to select the data item in the dialog would be preferred.

 

Thanks!