Customizing Movie Interface

    There are several ways to do this. Our options include server side form definition, server side columns definition, from script grid code etc. But let’s make this change in the central location, the entity itself, so its title changes everywhere.

    When Sergen generated code for Movie table, it created a entity class named MovieRow. You can find it at Modules/MovieDB/Movie/MovieRow.cs.

    Here is an excerpt from its source with our Runtime property:

    We’ll talk about entities (or rows) later, let’s now focus on our target and change its DisplayName attribute value to *Runtime (mins)”:

    2. {
    3.     // ...
    4.     [ConnectionKey("Default"), DisplayName("Movie"), InstanceName("Movie"), 
    5.      TwoLevelCached]
    6.     public sealed class MovieRow : Row, IIdRow, INameRow
    7.     {
    8.         // ...
    9.         [DisplayName("Runtime (mins)")]
    10.         public Int32? Runtime
    11.         {
    12.             get { return Fields.Runtime[this]; }
    13.             set { Fields.Runtime[this] = value; }
    14.         }
    15.         //...
    16.     }
    17. }

    Now build solution and run application. You’ll see that field title is changed in both grid and dialog.

    So far so good, what if we wanted to show another title in grid (columns) or dialog (form). We can override it corresponding definition file.

    Let’s do it on columns first. Next to MovieRow.cs, you can find a source file named MovieColumns.cs:

    1. namespace MovieTutorial.MovieDB.Columns
    2. {
    3.     // ...
    5.     [BasedOnRow(typeof(Entities.MovieRow))]
    6.     public class MovieColumns
    7.     {
    9.         public Int32 MovieId { get; set; }
    10.         //...
    11.         public Int32 Runtime { get; set; }
    12.     }
    13. }

    You may notice that this columns definition is based on the Movie entity (BasedOnRow attribute).

    Any attribute written here will override attributes defined in the entity class.

    Let’s add a DisplayName attribute to the Runtime property:

    Now we set column caption to “Runtime in Minutes”.

    We actually added two more attributes.

    One to override column width to 150px.

    And another one to align column to right (AlignCenter, AlignLeft is also available).

    Let’s build and run again, than we get:

    Movies Runtime Column

    Form field title stayed same, while column title changed.

    Description and Storyline fields can be a bit longer compared to Title field, so lets change their editor types to a textarea.

    Open MovieForm.cs in the same folder with MovieColumns.cs and MovieRow.cs.

    1. namespace MovieTutorial.MovieDB.Forms
    2. {
    3.     //...
    4.     [FormScript("MovieDB.Movie")]
    5.     [BasedOnRow(typeof(Entities.MovieRow))]
    6.     public class MovieForm
    7.     {
    8.         public String Title { get; set; }
    9.         public String Description { get; set; }
    10.         public String Storyline { get; set; }
    11.         public Int32 Year { get; set; }
    12.         public DateTime ReleaseDate { get; set; }
    13.         public Int32 Runtime { get; set; }
    14.     }
    15. }

    and add TextAreaEditor attributes to both:

    1. namespace MovieTutorial.MovieDB.Forms
    2. {
    3.     [FormScript("MovieDB.Movie")]
    5.     public class MovieForm
    6.     {
    7.         public String Title { get; set; }
    8.         [TextAreaEditor(Rows = 3)]
    9.         public String Description { get; set; }
    10.         [TextAreaEditor(Rows = 8)]
    11.         public String Storyline { get; set; }
    12.         public Int32 Year { get; set; }
    13.         public DateTime ReleaseDate { get; set; }
    14.         public Int32 Runtime { get; set; }
    15.     }
    16. }

    I left more editing rows for Storyline (8) compared to Description (3) as Storyline should be much longer.

    After rebuild and run, we have this:

    Serene has several editor types to choose from. Some are automatically picked based on field data type, while you need to explicitly set others.

    As editors became a bit higher, form height exceeded the default Serenity form height (which is about 260px) and now we have a vertical scroll bar. Let’s remove it.

    Sergen generated some CSS for our movie dialog in MovieTutorial.Web/Content/site/site.less file.

    You can safely remove the 3 comment lines (appended by code generator…). This is just a reminder for you to move them to a better place like a site.movies.less file specific to this module (recommended).

    These rules are applied to elements with .s-MovieDB-MovieDialog class. Our Movie dialog has this class by default, which is generated by “s-“ + ModuleName + “-“ + ClassName.

    In the second line it is specified that this dialog is 650px wide by default.

    In third line, we specify that field labels should be 150px (@l: 150px).

    Let’s change our initial dialog height to 500px (in desktop mode), so it won’t require a vertical scroll bar:

    1. .s-MovieDialog {
    2.     > .size { width: 650px); height: 500px; }
    3.     .caption { width: 150px; }
    4. }

    For this change to be applied to your dialog, you need to build solution. As this “site.less” file is compiled to a “site.css” file on build. Now build and refresh the page.

    Movie Dialog 500px

    What i mean by desktop mode above will become clearer soon. Serenity dialogs are responsive by default. Let’s resize our browser window to a width about 350px. I’ll use mobile mode of my Chrome browser to switch to iPhone 6:

    And now an iPad in landscape mode:

    Movie Dialog iPad

    So, the height we set here is only meaningfull for desktop mode. Dialog will turn into a responsive, device size specific mode in mobile, without having to mess with CSS queries.

    Our page has title of Movie. Let’s change it to Movies.

    Open MovieRow.cs again. 

    1. namespace MovieTutorial.MovieDB.Entities
    2. {
    3.     // ...
    4.     [ConnectionKey("Default"), DisplayName("Movie"), InstanceName("Movie"), 
    5.      TwoLevelCached]
    6.     public sealed class MovieRow : Row, IIdRow, INameRow
    7.     {
    8.         [DisplayName("Movie Id"), Identity]

    Change DisplayName attribute value to Movies. This is the name that is used when this table is referenced, and it is usually a plural name. This attribute is used for determining default page title.

    InstanceName corresponds to singular name and is used in New Record (New Movie) button of the grid and also determines the dialog title (e.g. Edit Movie).