Blog posts by Patrick Ibert's blog

Logica Campaign Designer 1.1 Released!

Mon, 02 Jan 2012 10:22:14 GMT

A new version of the custom property Logica Campaign Designer has now been released and contains the following changes:

Added a fieldset to every dialog window to make them look a little cleaner.
Renamed the item "Page button" to "Link".
Added some new settings for the Link item, as Target frame, Style, Link target .
Added a new setting in the custom settings page called "Link Css url", were you now can add a path to a css for the Link item, so that the editor can choose different styles for the Link item in a dropdown list instead of just having one style for the Link as before.
Added a new setting in the custom settings page for the property called "Let the editor set size", which does so that the campaign area wont be updated by the Width and height settings in the custom settings page, but by the editor instead at the "Edit area styles" button in edit mode.
Added a usercontrol that can be found in the folder RenderPropertyOnPage called "LogicaCampaignDesignerPropertyRender" that simplifies adding the property to a page a little.

The property can be downloaded from the EPiServer nuget feed or from it’s codeplex site.

Feedback is always welcome!

Website: http://locd.codeplex.com/

Logica Campaign Designer 1.0 Released!

Tue, 06 Dec 2011 12:29:52 GMT

A new version of the custom property Logica Campaign Designer has now been released and contains the following changes:

Added a list of the items in the campaign area, by dragging and dropping the items in the list you can change the z-index order of the items.
Added two new input fields which lets the editor set the x and y position of an item by typing the numbers.
Splitted up the javascript code in seperate js files to make it easier to maintain.
Removed the button “Edit item styles” as it’s no longer needed with the new item list and input fields for x and y position.

I also uploaded a video of me demonstrating the property to youtube that you can watch here:

The property can be downloaded from the EPiServer nuget feed or from it’s codeplex site.

Feedback is always welcome!

Website: http://locd.codeplex.com/

New features for the Logica Campaign Designer property!

Fri, 28 Oct 2011 15:54:40 GMT

Hello everyone!
Today I released version 0.9 of my custom property Logica Campaign Designer. For those that somehow have missed my property heres a short description:

Logica Campaign Designer (LoCD) simplifies the editorial process of creating campaign areas and front page teasers by supplying drag-n-drop elements. LoCD ships with a predefined set of elements such as text, image, link button, Facebook Like, Tweet button, Google+, Google maps and background image or color etc. All elements can be placed freely within the campaign area and controlled by the editor in the standard edit mode. LoCD is a custom property that is easily added to any EPiServer CMS page type.

This version has a few css improvements and some cool new features, one of them is google maps.

With my property the editors can now add a google map from the Add item button. When selecting the google maps item a dialog like this shows up:

Could look like this if you choose it to be shown as a map:

Or if you choose it be shown as streetview it can look like this:

Another cool new feature is that we can now select what items we wish to include in the property for the editors, perhaps the editors don’t need the Like buttons, this can be changed by going to the custom settings page for the property and unselecting the checkboxs of the items you don’t wish to include, looks like this:

Where to download?

At the moment when this blog post is written the latest version of the property is not up at the nuget feed yet, but will soon be, meanwhile you can download it from the codeplex site.

Codeplex site: http://locd.codeplex.com/

Feedback!
Any feedback you could give me would be great. I speak english and swedish.

Introducing the new custom property Logica Campaign Designer!

Mon, 03 Oct 2011 15:25:56 GMT

Hello everyone! Today I would like to introduce something I have for the last month developed. It came to me as an idea from a colleague of mine here at Logica, Tobias Nilsson, this was something he had thought about making before but never had time for, so he asked me to do it and here it is so far. So let’s check out what it is I’m talking about.

What is Logica Campaign Designer?
Logica Campaign Designer (LoCD) simplifies the editorial process of creating campaign areas and front page teasers by supplying drag-n-drop elements. LoCD ships with a predefined set of elements such as text, image, link button, Facebook Like, Google+ and background image or color etc. All elements can be placed freely within the campaign area and controlled by the editor in the standard edit mode. LoCD is a custom property that is easily added to any EPiServer CMS page type.

Sounds awesome... So what does it look like?
Well.. After you have added it to a page it should look like something like this:

(Note: you may delete the Logica picture that is there when you start up the property for the first time, but why would you want to do that? ).

The size of the area you give the editor to work with in this property is set in the Custom Settings page for the property, right here:

Here you also may or may not set another path for the css you want to be used as the stylesheet for the tinymce for this property.

So... Patrick... Please show me some more of this awesome property of yours...

Well alright as you asked so nicely. When an editor presses the Add item button a dialog with a list of predefined items pops up. Looks like this:

So let’s say we create a text item, we then get a text that says New text, to change it you just select it by clicking on it and then pressing the button Edit item and then a dialog comes up with a tinymce editor, like this:

Cool... But how do I install it? I want to try this out!

1. Download it from here http://locd.codeplex.com/ and just add the files to the root of your page or Install the property from it’s nuget at the EPi Nuget feed.
2. After you installed it for a site you should look in the LogicaCampaignDesigner’s Styles folder. In the folder there is a css file called “StylesForPageUsingProperty.css” that tells you what css settings you will need to put in your css for pages using the property to display it correct.

In here there is also a css file called “Styles.css”, this is the default css for the tinymce editor for the property, you can create your own and just change the path of it in the Custom settings page as shown before in this blog post. You will also need to add a reference to this file for the page using the property

Any bugs I should know about?
Well yea there are some bugs that I plan to fix in future releases, it’s pretty close to be bug free I think but there are some stuff that looks weird (mostly in IE). There could also be some bugs in it that I don’t know of yet. The known bugs are the following:

It doesn’t work to create a google plus button in IE (there’s probably a better way to create it from code then mine)
When you have edited a text item in IE and you drag it around, it changes position a little while you move it around
You can only have one of these properties for a page, because the javascript was only written to handle one.
When changing size of the text and having rows it will look weird in the editor, this is caused by the EPiServer editor css.

Codeplex site: http://locd.codeplex.com/

Thanks for your time!

Implement a comment system using EPiServers datastore by using Paul Smith's DynamicDataStoreSession class

Thu, 18 Aug 2011 10:57:06 GMT

Hi!

First I would want to start this post by thanking Paul Smith for taking the time to point out the mistakes I had done in the last post I did about this, I learned a lot how to use the datastore in a correct way from his help! Thanks Paul!

This post is about how we can use Paul Smith's DynamicDataStoreSession class with very little code to implement a comment system for our EPi pages using the EPiServer datastore.

The idea is that I will create an Usercontrol that I can place on a page where I want people to be able to comment the content.

I start off with creating my entity class:

     public class Comment
    {
        public Identity Id { get; set; }
        [EPiServerDataIndex]
        public Guid PageGuid { get; set; }
        public string UserName { get; set; }
        public string Location { get; set; }
        public string UserComment { get; set; }
        public DateTime Date { get; set; }
    }

Note that my PageGuid property has the attribute [EPiServerDataIndex], it will tell the DDS to map the property to an indexed database column, which will speed up retrieving the data.

I then make a factory class were I will add my datastore methods:

     public static IEnumerable<Comment> GetComments(Guid pageGuid)
        {
            var session = new DynamicDataStoreSession<Comment>();
            return session.Find().Where(p => p.PageGuid).Equals(pageGuid).Go().OrderByDescending(p => p.Date);
        }

        public static void SubmitComment(string comment, Guid pageGuid)
        {
            var store = new DynamicDataStoreSession<Comment>();
            var newComment = new Comment
            {
                Id = Identity.NewIdentity(Guid.NewGuid()),
                UserName = Membership.GetUser().UserName,
                Location = "Stockholm, Sweden",
                UserComment = comment,
                Date = DateTime.Now,
                PageGuid = pageGuid
            };
            store.Save(newComment);

}

My usercontrol looks like this:

<asp:Repeater ID="repComments" runat="server">
                <ItemTemplate>
                   <tr>
                   <td><%# DataBinder.Eval(Container.DataItem, "UserName")%> (<%# DataBinder.Eval(Container.DataItem, "Location")%>) </td>
                   <td><br /><%# DataBinder.Eval(Container.DataItem, "UserComment")%></td><br /><br />
                 </tr>
                </ItemTemplate>
                </asp:Repeater>

and in the code behind:

protected void Page_Load(object sender, EventArgs e)
        {
           repComments.DataSource = ArticleComment.GetComments(CurrentPage.PageGuid);
           repComments.DataBind();
       }

        protected void btnComment_Click(object sender, EventArgs e)
        {
            if (tbComment.Text == "")
                return;
            ArticleComment.SubmitComment(tbComment.Text, CurrentPage.PageGuid);
            repComments.DataSource = ArticleComment.GetComments(CurrentPage.PageGuid);
            repComments.DataBind();
            tbComment.Text = "";
        }

I hope you had fun and found this post useful :)