Composite C1 - Accessing global datatypes in razor functions

StackOverflow https://stackoverflow.com/questions/21538923

  •  06-10-2022
  •  | 
  •  

Question

I have been attempting to implement functions to display global datatypes in a composite c1 site.

I understand how basic razor functions work but they only seem to use local data. I am looking to create a razor function that accesses and filters(in a manner similar to the DataReferenceFilter available with visual functions) a global datatype that I have created for employee bios so that I can display this information on multiple pages throughout the site.

I have been able to create a Visual Function that achieves this but these do not play well with the style being manually edited.

This is the layout of the function using local data input directly into the function:

@inherits RazorFunction

    @functions {
        public override string FunctionDescription
        {
            get  { return "A people widget that diaplays a picture, name and small bio of a team member"; }
        }

    [FunctionParameter(Label = "Name", Help = "Input the persons name here", DefaultValue = "Firstname Lastname")]
    public string Name { get; set; }

    [FunctionParameter(Label = "Position", Help = "Input the persons position here", DefaultValue = "Manager")]
    public string Position { get; set; }

    [FunctionParameter(Label = "Qualifications", Help = "Input the persons qualifications here",DefaultValue = "University of Newcastle")]
    public string Qualifications { get; set; }

    [FunctionParameter(Label = "Bio", Help = "Input the persons biography snippit here", DefaultValue = "Input bio snippit here")]
    public string Bio { get; set; }

    [FunctionParameter(Label = "Image", Help = "Select the image to be used by this people widget")]
    public DataReference<IMediaFile> ImageSource { get; set; }
}

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://www.composite.net/ns/function/1.0">
    <head>
    </head>
    <body>
        <div class="peoplebox">
            <div class="peopleimg">
                <img src="~/media({@ImageSource.Data.Id})" alt="..." />
            </div>
            <p class="peoplename">@Name</p>
            <p><i>@Position</i></p>
            <h5>@Qualifications</h5>
            <div class="blockquote">
                <p>@Bio</p>
            </div>
        </div>
    </body>
</html>

The page seems to point in the right direction but I am unsure how to integrate this into a razor function.

Was it helpful?

Solution

You would go and use the Data property in your Razor function. A small example goes like this

@{
    var employees = Data.Get<INameOfYouDataType>().Where(m => ... some filter);

    foreach (var employee in employees)
    {
        <div class="peopleimg">
            <img src="~/media({@employee.Id})" alt="..." />
        </div>
        <p class="peoplename">@employee.Name</p>
        <p><i>@employee.Position</i></p>
        <h5>@employee.Qualifications</h5>
        <div class="blockquote">
            <p>@employee.Bio</p>
        </div>    
    }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top