BForms Panel component is designed to provide rich functionality, cross-browser, cross-device and internationalization support for your entities.

The feature set includes AJAX-enabled editing adapted for Entity Framework that can be customized with your own update logic. The UI is touch friendly and HTML5 enhanced featuring edit in place.

On the client side, the Panel is deployed as an AMD jQuery widget that supports theming and templates. The styling is done using bootstrap v3 CSS grid system.


Models

The first step in the panel creation is the model definition. You can set Readonly and/or Editable components for your model. Also the model can be divided into subcomponents.

It is not required to split your model in multiple components, but it is recomended to handle the ajax requests in an optimal manner. Best practice is to divide your entity in logical parts. Maybe you don't want all properties of your model editable, or maybe you don't want to update all the properties on the model at the same time. For this you can create multiple panels for your entity.

We can use an enum to hold all the components of our model.

Components Enum

public enum PanelComponentsEnum
{
    UserInfo = 1,
    UserRole = 2
}

After we divided the entity into logical subgoups we can go further and create the Readonly and Editable Models.

Readonly Model

public class UserReadonlyModel
{
    [BsPanel(Id = PanelComponentsEnum.UserInfo, Expandable = true, Editable = false)]
    [Display(Name = "User info")]
    public UserInfoModel UserInfo { get; set; }

    [BsPanel(Id = PanelComponentsEnum.UserRole)]
    [Display(Name = "User role")]
    public UserRoleModel UserRole { get; set; }
}

Example

As you may have noticed in the above code example, there are some custom attributes declared in the readonly model. The BsPanelAttribute allows you to set specific properties for the panel.


BsPanelAttribute

Options

Expandable

type bool
default true

Set the panel as expandable.

Editable

type bool
default true

Set the panel as editable.

IsLarge

type bool
default false

Set the panel aspect as large.

Id

type object
default none

Set the panel unique id.

Add also editable models if your panels suport editing.


Panel helper

In order to render a panel collection, use the Html.BsPanelsFor() html helper extension.

@Html.BsPanelsFor(Model)


This helper returns a BsPanelsHtmlBuilder used to build and configure the html of the panels collection.


BsPanelsHtmlBuilder

Methods

HtmlAttributes(Dictionary<string, object> htmlAttributes)

params:

  • htmlAttributes

    type Dictionary<string, object>
    default none
    description object representing a key-value set of html attributes

Set html attributes to the panel collection's dom element wrapper.

Example

@(Html.BsPanelsFor(Model).HtmlAttributes(new { @class = "custom"})


SetTheme(BsTheme theme)

params:

  • theme

    type BsTheme
    default BsTheme.Default
    description theme selector

Set the panel collection's color theme.

Example

@Html.BsPanelsFor(Model).SetTheme(BsTheme.LightGreen)


ConfigurePanels(Action<BsGridRowConfigurator<TRow>> configurator)

params:

  • configurator

    type Action<BsPanelsConfigurator<TModel>>
    default none
    description panels configurator (html attributes, is editable, is expanded, mode, content, color)

Using this method, you can add html attributes to each panel, set its color or modify different properties. Each panel in the group can be customized as you like by using the provided methods.

Example

@(Html.BsPanelsFor(Model).ConfigurePanels(cfg =>
{
    cfg.Renderer<BsPanelBaseRenderer>();
    
    cfg.GetReadonlyUrl = Url.Action("GetReadonlyContent");
    cfg.GetEditableUrl = Url.Action("GetEditableContent");
    cfg.UpdateUrl = Url.Action("SetContent");

    cfg.For(x => x.UserInfo).Content(Html.Partial("Readonly/_UserInfo", Model.UserInfo).ToString());

    cfg.For(x => x.UserRole).HtmlAttributes(new { @class = "bs-userRole" }).Theme(BsPanelTheme.LightGreen).InitialEditable();
}))  


BsPanelsConfigurator

Properties

GetReadonlyUrl

type string
default none
description url string

Specify url from where the readonly form will be loaded.

Example

cfg.GetReadonlyUrl = Url.Action("GetReadonlyContent")


GetEditableUrl

type string
default none
description url string

Specify url from where the editable form will be loaded. It will assume that the box form is editable.

Example

cfg.GetEditableUrl = Url.Action("GetEditableContent")


UpdateUrl

type string
default none
description url string

Specify url where the changed form will be submitted.

Example

cfg.UpdateUrl = Url.Action("SetContent")


Methods

AddPanel(panelAttribute, displayAttribute)

params:

  • panelAttribute

    type BsPanelAttribute
    default none
    description Set panel attributes like Id, IsLarge, Expandable, Editable for the new panel.

  • displayAttribute

    type DisplayAttribute
    default none
    description Set display attributes like Name, Order, Description for the new panel.

Adds a new panel to the existing panel collection and sets its properties if any is provided.

Example

cfg.AddPanel(new BsPanelAttribute {Id = 6, Editable = true, Expandable = true, IsLarge = false}, new DisplayAttribute {Name = "Custom"});


For<TValue>(Expression<Func<TModel, TValue>> expression)

This helper returns a BsPanelHtmlBuilder used to build and configure the html of the panel.

Example

cfg.For(x => x.UserInfo)

BsPanelHtmlBuilder

Methods

HtmlAttributes(Dictionary<string, object> htmlAttributes)

params:

  • htmlAttributes

    type Dictionary<string, object>
    default none
    description object representing a key-value set of html attributes

Set html attributes to the panel collection's dom element wrapper.

Example

cfg.For(x => x.UserInfo).HtmlAttributes(new { @class = "custom" })


NoHeader()

Removes the panel header.

Example

cfg.For(x => x.UserInfo).NoHeader();

Name(string name)

params:

  • name

    type string
    default none
    description string value representing the display name

Sets the panel display name.

Example

cfg.For(x => x.UserInfo).Name("Panel Name");

Id(object id)

params:

  • id

    type object
    default none
    description object representing the unique id

Sets the panel's unique id.

Example

cfg.For(x => x.UserInfo).Id(7);

ObjId(object objId)

params:

  • objId

    type object
    default none
    description object representing the ObjId

Sets the panel's objId property.

Example

cfg.For(x => x.UserInfo).Id(7);

InitialEditable()

Specify if the panel form initial state is editable. The panel must have an editable component.

Example

cfg.For(x => x.UserInfo).InitialEditable();

Editable(bool isEditable)

params:

  • isEditable

    type bool
    default none
    description boolean value representing if the form can be editable

Specify if the panel form has an editable component.

Example

cfg.For(x => x.UserInfo).Editable(true);

Expanded(bool isExpanded)

params:

  • isExpanded

    type bool
    default none
    description boolean value representing if the form initial state is expanded

Specify if the panel form is already expanded.

Example

cfg.For(x => x.UserInfo).Expanded(false);

Expandable(bool isExpandable)

params:

  • isExpandable

    type bool
    default true
    description boolean value representing if the form can be expanded

Specify if the box form is expandable or static.

Example

cfg.For(x => x.UserInfo).Expandable(true);

Mode(BsPanelMode mode)

params:

  • mode

    type BsPanelMode
    default none
    description BsPanelMode enum can be Readonly, Editable or Both.

Sets panel type, readonly/editable/both, overrides any past and future settings.

Example

cfg.For(x => x.UserInfo).Mode(BsPanelMode.Readonly);

Content(string content)

params:

  • content

    type string
    default none
    description Custom html content.

Sets the content of the panel form. It will also set the panel as expanded and loaded.

Example

cfg.For(x => x.UserInfo).Content("Custom Html");

Renderer(BsPanelBaseRenderer renderer)

params:

  • renderer

    type BsPanelBaseRenderer
    default none
    description Choose which renderer you want to use for the panel.

Set the renderer for the panel. You can choose from BsPanelLightRenderer and BsPanelBaseRenderer.

Example

cfg.For(x => x.UserInfo).Renderer(new BsPanelLightRenderer());

Theme(BsPanelTheme theme)

params:

  • theme

    type BsPanelTheme
    default Default
    description Choose which theme you want to use for the panel.

Set the theme for the panel. You can choose from BsPanelTheme enum: Default, Blue, LightGreen, LightBlue, LightYellow, Red.

Example

cfg.For(x => x.UserInfo).Theme(BsPanelTheme.LightGreen);

Glyphicon(Glyphicon glyphicon)

params:

  • glyphicon

    type Glyphicon
    default None
    description Choose a glyphicon for the panel.

Set the glyphicon for the panel. You can choose from Glyphicon enum.

Example

cfg.For(x => x.UserInfo).Glyphicon(Glyphicon.User);


Javascript

First step is to require bforms.panel.js aka bforms-panel (defined in RequireJS.json).

require([
        'bforms-panel'    
], function () { }


Now that the script is loaded we can apply the panel widget on the element.

$('.bs-userRole').bsPanel({
    name: 'userRole',
    editSuccessHandler : function(e, data) {
        $('.js-userRole').text(data.Role);
    }
});

For further configuration see the list of options below:


Options

name

type string
default DOM element id

Used to uniquely identify the panel. It is not required as long as the panel has the id attribute set.

readonlyUrl

type string
default null

Specify url from where the readonly form will be loaded.

editableUrl

type string
default null

Specify url from where the editable form will be loaded. It will assume that the box form is editable.

saveUrl

type string
default null

Specify url where the changed form will be submitted.

initialReadonly

type bool
default true

Specify if the panel form initial state is editable. The panel must have an editable component.

editable

type bool
default true

Specify if the panel has an editable component.

cacheReadonlyContent

type bool
default true

Specify if the panel should cache readdonly content.

formOptions

type obj
default {validateSave: true, parseSave: true}

Specify if the form data should be validated and parsed on save.

additionalData

type object
default {}

Set aditional data.

actions

type array
default []

Represents a set of actions applicable on the specified form. By default the panel has a save action if it has an editable component.

beforeSaveAjax

type Function
default none

Specify a function to be called before ajax save action.

beforeEditSuccessHandler

type Function
default none

Specify a function to be called before edit success handler function is called.

editSuccessHandler

type Function
default none

Specify a function to be called after the data was successfully saved.

afterFormInit

type Function
default none

Specify a function to be called after the form is initialized.

beforeReadonlyLoad

type Function
default none

Specify a function to be called before the readonly data is loaded.

onReadonlyLoadSuccess

type Function
default none

Specify a function to be called after the readonly data is loaded successfully.

beforeEditableLoad

type Function
default none

Specify a function to be called before the editable form is loaded.

onEditableLoadSuccess

type Function
default none

Specify a function to be called after the editable form is loaded successfully.

beforeOpen

type Function
default none

Specify a function to be called before the panel is open.

afterOpen

type Function
default none

Specify a function to be called after the panel is open.

beforeClose

type Function
default none

Specify a function to be called before the panel is closed.

afterClose

type Function
default none

Specify a function to be called after the panel is closed.

onReadonlyShow

type Function
default none

Specify a function to be called when the readonly component is shown.

onEditableShow

type Function
default none

Specify a function to be called when the editable component is shown.