Developer 101 - Lab: Create a List of Social Media Accounts

James Vidler

July 25, 2018 19:25

In this lab, we will define a list of social media accounts, and then create a module to display them on the website. Again, you will need to have the Agility Content Manager open in a web browser and our Sample Site open in Visual Studio. At the end of the lab, you will have a list of social media accounts on a page.

First off, we'll want to store the list of social media icons in Shared Content. Architecturally this makes sense. We'll likely need to access these social media icons in other places across the site. We don't want to have to enter this content each time we want to show some social media icons on a page. We want to have one central place, and then have a module that can be added to any page that pulls from that list.

Start by navigating to the Settings > Content Definitions in Agility.
Click on New Content Definition and set the Type to “Content List”.
Enter the Name as “Social Media Accounts”, and the Reference Name will auto-populate.
Save the content definition, and navigate to the Form Builder tab.
Click on Add Field, and enter the Field Label as “Title”. We will be using this field as a way of ordering the data, later. Leave the field type as Text, ensure “Required” is checked, and click on OK & New.
Give the new property a label of “Profile URL”, and set the field type to “URL”. Ensure that “Required” is checked, set the Default Target to “New Window”, and click on OK & Close.
Click on the List Settings tab so we can customize how our data appears in Agility. We’ll define which fields we want to see on the data grids, and what order to display the items in. We want to ONLY include Title and Status in the grid and set the default sort order to Title Ascending. Use the delete and add buttons to add/remove columns.
Now click on Save & Close to finish creating the content definition.
We now need to create an 'instance' of the content definition so we can add data to it. Click on the Shared Content link on the left navigation, and then New Content List. In the dialog that opens, select "Social Media Accounts" from the Content Definition drop down list. Enter "Social Media Accounts" again as the Display Name (the Reference Name will auto-populate). Click Save & Close to finish create the list. You can now click on Social Media Accounts from the Shared Content list to open it, and add a number of test data items.
Now we have a list with data, we can create a module to display it on the website. In Agility, go back to Settings > Module Definitions. Create a new module called “Social Media Accounts Listing” - make sure the Reference Name and Description fields are populated appropriately.
Select the Form Builder tab and click on Add Field. Enter the Label as “Accounts”, change the property type to “Linked Content”, the Content Definition to “Social Media Accounts” and the Content View to “Shared Content”. Finally, select "Social Media Accounts" from the Shared Content list. This means that each instance of this module will reference a shared list of social media accounts. We can leave the “Render as” option as “Grid” to use the default settings we defined in the content definition.
Click Save & Close and then select the Output Template Select the radio button option "MVC Controller Action", enter the "SocialMediaAccounts" as the Controller and "Listing" as the action. Click Save & Close to finish creating the module.
In the Module Definitions screen, click the Download API link to get the latest Model objects. Use this file download to update the contents of your API file, as we did in the previous lab.

Pro Tip: Use the Agility CMS Model Updater VS Extension
We can now create the code files to go with the module. In the Controllers directory of your solution, add a new controller called “SocialMediaAccounts“.

We now need to add an action to this controller for our new Listing module, with a parameter for the module's data. Your code should look like this:

using MVC4SampleSite.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVC4SampleSite.Controllers
{
    public class SocialMediaAccountsController : Controller
    {


        public ActionResult Listing(Module_SocialMediaAccounts module)
        {
            return PartialView(module);
        }

    }
}

Next, create the View to match - add a partial view called "Listing.cshtml" in the directory ~/Views/SocialMediaAccounts. We can now use Razor syntax again to output the module's properties (in this case, the linked list of social media accounts):
```
@using MVC4SampleSite.Models;
@model Module_SocialMediaAccounts

<ul>
    @foreach (SocialMediaAccounts account in Model.Accounts.Items())
    {
        <li>
            @account.Title: @Html.Raw(account.URL)
        </li>
    }
</ul>
```
After saving these and files and building the solution, go back to Agility and add an instance of the new module on a page. After saving the page configuration, navigate to this page in your browser to see the module displayed.
```
 
```

Comments