Blog 4 umbraco, 2.0.14 Easy blog creation

Sofar we've only looked into having a single instance of a blog on your site. So the blog was the site in itself. However, there is really no reason why you couldn't run multiple instances of a blog as part of a bigger site so multiple authors could have their own place to write content. Also we havn't looked into who actually is the author. of the blog.

So today we will do 2 things:

1. Create a simple User Picker for the UI so we can pick a user on the blog item
2. Create a simple dashboard for creating a blog with

This will involve messing around with the AbstractDataEditor class, the User API and the build Umbraco UIcontrols which are located in the umbraco.uicontrols namespace.

The user picker

For reasons unknown there is actually no UI component in umbraco for picking a specific user and save the users ID on a document. But no worries, this is really really easy to do and faster then you can say "AbstractDataEditor".

We want to create a dropdown control so all we have to do is render a dropdown and save the user selected in the control

Start off by creating a new class, and make it inherite the class: umbraco.cms.businesslogic.datatype.AbstractDataEditor

Override the Id, and DataTypeName Properties and set a unique ID and a proper name.

Then we need the dropdown control and wire up the events we need:

private DropDownList m_control = new DropDownList();
        public UserPicker()
        {
            base.RenderControl = m_control;
            m_control.Init += new EventHandler(m_control_Init);
            base.DataEditorControl.OnSave += new umbraco.cms.businesslogic.datatype.AbstractDataEditorControl.SaveEventHandler(DataEditorControl_OnSave);
        }

When we have the events wired up we can load the users into the control:

void m_control_Init(object sender, EventArgs e)
        {
            m_control.Items.Clear();
            foreach (User u in User.getAll())
            {
                m_control.Items.Add(new ListItem(u.Name, u.Id.ToString()));
            }
            m_control.SelectedValue = base.Data.Value != null ? base.Data.Value.ToString() : "";
        }

And then tell the dataeditor to save the selected value

void DataEditorControl_OnSave(EventArgs e)
        {
            base.Data.Value = m_control.SelectedValue;
        }

And presto, we can now save a User ID on a document. We will add this as a autho property on the Blog document type. The complete class can be found here

The dashboard control

So now that we have a place to store the author ID, we will create a simple control to manage the creation of new blogs and place it on the dashboard. To give it a native feel and follow the umbraco UI guidelines, we use the built-in UI controls to manage the UI. These are in the controls.dll and can be referenced in the .ascx by adding a reference:

<%@ Register Namespace="umbraco.uicontrols" Assembly="controls" TagPrefix="umb" %>

So to build a simple form with internal umbraco UI components you can now use the umb prefix, like so:

<umb:Pane runat="server" Text="Create a blog">
    <umb:PropertyPanel runat="server" Text="Blog name">
        <asp:TextBox ID="tb_name" runat="server" />
    </umb:PropertyPanel>

    <umb:PropertyPanel runat="server" Text=" ">
        <asp:Button runat="server" OnClick="createBlogClick" Text="Create" />
    </umb:PropertyPanel>

</umb:Pane>

Now that we have the form in place, all we need is some simple API calls to create the correct document

DocumentType dt = DocumentType.GetByAlias("Blog");
Document d = Document.MakeNew(tb_name.Text, dt, User.GetCurrent(), int.Parse(cp.Text));

d.getProperty("author").Value = User.GetCurrent().Id;
d.getProperty("blogName").Value = tb_name.Text;
d.getProperty("blogDescription").Value = "The blog of " + User.GetCurrent().Name;

d.Save();

d.Publish(User.GetCurrent());
umbraco.library.UpdateDocumentCache(d.Id);

Later on we will enable the form to also create the author automaticly, but for now the form is just attached to the current user.

Adding it to the installer

The final thing we need to do is to ensure that the installer adds the control to the dashboard on install. The usercontrol is added automaticly, but we need to instruct the installer to add it to the dashboard.config (and remove it on uninstall as well). We do this with a package action:

<Action runat="install" alias="addDashboardSection" dashboardAlias="CreateBlog">
      <section>
        <areas>
          <area>content</area>
        </areas>
        <tab caption="Create Blog">
          <control>/usercontrols/Blog4Umbraco/BlogCreator.ascx</control>
        </tab>
      </section>
    </Action>

That is all for today, we did a new ui component for selection users in about 15 lines of code, we used native UI components for building a custom dashboard control and finally wrapped everything up nicely in the installer.