In this blog article, I'm going to explain on how to display more information in
a mosaicview. Suppose, you want to display a dialogpanel when clicking a custom
icon in the mosaicview. In this dialogpanel you'd like to display and update a specific
field.
To accomplish this, three custom classes should be developed.
- MyRecordMosaicViewItem
This class is responsible for adding the custom action icon.
- MyIconButton
Handles the layout for the icon and decides whether the DialogPanel control should
be added to the page or not.
- MyForm
Shows the content from the DialogPanel.
The RecordMosaicViewItem
The MyRecordMosaicViewItem inherits from the default RecordMosaicViewItem and adds
an additional action icon to allow the user to display this additional feature.
To achieve this, only one method must be overridden: GetAvailableActions.
This methods is responsible for determing which actions are available for the object
being represented by the mosaic view item. In this method, we add the custom action
icon (see below for the implementation of the action icon itself).
| C# |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
public class MyRecordMosaicViewItem : RecordMosaicViewItem
{
protected override IList>Control< GetAvailableActions()
{
IList<Control> oActions = base.GetAvailableActions();
MyIconButton oButton = new MyIconButton();
oButton.ToolTip = "Show Dialogue";
oButton.DataItem = this.DataItem;
oButton.Style.Add(HtmlTextWriterStyle.BackgroundImage, this.GetIconImageUrl());
oActions.Add(oButton);
return oActions;
}
/// Gets the url to the icon being displayed on the view item.
private string GetIconImageUrl()
{
return this.Page.ClientScript.GetWebResourceUrl(typeof(MyRecordMosaicViewItem), "Adam.Web.Samples.Resources.add.gif");
}
}
|
The IconButton
The custom IconButton itself is responsible for displaying the icon in the mosaic
view item and for adding the DialogPanel control to our page when the icon has been
clicked.
The most important property in this class is 'ButtonClicked'. This flag is
used to decide whether the DialogPanel control should be added to page or not. We
need to store this in the ViewState because the DialogPanel control shouldn't
only be added when executing the OnClick event from this IconButton, it should also
be added on each postback when the DialogPanel should stay visible. (e.g. a postback
launched from the inner form from the DialogPanel)
| C# |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
public class MyIconButton : IconButton
{
#region Fields
private DialogPanel _DialogPanel;
private FormMyCustomControl _FormMyCustomControl;
private object _DataItem;
#endregion
#region Methods
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
// Listen the the click event of the action icon.
this.Click += new EventHandler(MyIconButton_Click);
}
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
// When a post-back occurs in the dialog panel, we need
// to add the dialog panel again (in order to have correct
// post-back data inside the dialog panel).
if (this.ButtonClicked == true)
{
this.AddDialogPanel();
}
}
private void DialogBox_DialogButtonClick(object sender, DialogButtonClickEventArgs e)
{
//Handle the button Click event
if ((e.ButtonType & DialogButtonType.Accept) != 0)
{
//Check whether the custom control is ready close
//If not, the dialogpanel should stay open.
if (!this.FormMyCustomControl.IsValid())
{
this.FormMyCustomControl.ErrorMessage = "Validation failed";
// Keep dialog open.
_DialogPanel.Show();
return;
}
else
{
this.FormMyCustomControl.AcceptChanges();
this.ButtonClicked = false;
this.Controls.Remove(_DialogPanel);
_DialogPanel = null;
}
}
//When the cancel button is clicked, hide the dialogpanel
if ((e.ButtonType & DialogButtonType.Hide) != 0)
{
this.ButtonClicked = false;
this.Controls.Remove(_DialogPanel);
_DialogPanel = null;
}
}
private void MyIconButton_Click(object sender, EventArgs e)
{
NavigationModule.DisableEventOnBack();
this.AddDialogPanel();
//Set the buttonclicked flag
this.ButtonClicked = true;
}
private void AddDialogPanel()
{
//Add the dialogpanel to the list of controls
DialogPanel oDialogPanel = this.DialogPanel;
this.Controls.Add(oDialogPanel);
//Set the dialogpanel visible
this.DialogPanel.Show();
}
#endregion
#region Properties
public bool ButtonClicked
{
get
{
Object obj = this.ViewState["Buttonclicked"];
if (obj != null)
return (Boolean)obj;
return false;
}
set
{
this.ViewState["Buttonclicked"] = value;
}
}
public object DataItem
{
get
{
return _DataItem;
}
set
{
_DataItem = value;
}
}
protected FormMyCustomControl FormMyCustomControl
{
get
{
if (_FormMyCustomControl == null)
{
//Create the custom control
_FormMyCustomControl = new FormMyCustomControl();
_FormMyCustomControl.DataItem = this.DataItem;
}
return _FormMyCustomControl;
}
}
protected DialogPanel DialogPanel
{
get
{
if (_DialogPanel == null)
{
//Create the dialogPanel
_DialogPanel = new DialogPanel();
_DialogPanel.EnableTranslation = false;
_DialogPanel.AutoPostBack = DialogAutoPostBackMode.Accept | DialogAutoPostBackMode.Discard;
_DialogPanel.DialogButtonClick += new EventHandler<dialogbuttonclickeventargs>(DialogBox_DialogButtonClick);
_DialogPanel.DefaultButtons = DefaultDialogButtons.OkCancel;
_DialogPanel.Title = "MyTitle";
_DialogPanel.ID = "DialogPanel";
_DialogPanel.Controls.Add(this.FormMyCustomControl);
}
return _DialogPanel;
}
}
#endregion
}
|
The Form
Finally, we need a control which contains the content for the DialogPanel. For simplicity,
we only add a TextBox and an ErrorLabel to it.
| C# |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
public class FormMyCustomControl : Control
{
#region Fields
private TextBox _TextBox;
private Label _ErrorLabel;
private object _DataItem;
#endregion
public FormMyCustomControl()
{
}
protected override void OnLoad(EventArgs e)
{
this.EnsureChildControls();
base.OnLoad(e);
}
protected override void CreateChildControls()
{
base.CreateChildControls();
_TextBox = new TextBox();
_TextBox.ID = "ctrMyTextBox";
this.Controls.Add(_TextBox);
_ErrorLabel = new Label();
_ErrorLabel.Style.Add(HtmlTextWriterStyle.Color, "Red");
_ErrorLabel.Visible = false;
this.Controls.Add(_ErrorLabel);
}
public bool IsValid()
{
NavigationModule.DisableEventOnBack();
Record oRecord = this.DataItem as Record;
if (!object.Equals(oRecord, null))
{
if (((TextField)oRecord.Fields["MyValidationField"].MyLanguage).Value == this.Text)
{
return true;
}
}
return false;
}
public void AcceptChanges()
{
NavigationModule.DisableEventOnBack();
Record oRecord = this.DataItem as Record;
if (!object.Equals(oRecord, null))
{
((TextField)oRecord.Fields["MyField"].MyLanguage).SetValue(this.Text);
}
}
public string ErrorMessage
{
set
{
this.EnsureChildControls();
_ErrorLabel.Visible = true;
_ErrorLabel.Text = value; ;
}
}
public string Text
{
get
{
this.EnsureChildControls();
if (!object.Equals(_TextBox, null))
return _TextBox.Text;
return string.Empty;
}
}
public object DataItem
{
get
{
return _DataItem;
}
set
{
_DataItem = value;
}
}
}
|
How to use this code in Adam
Follow the steps below to use this code in adam.
- Register your assembly
More information is available in the Adam Help:
Developer Guide > Core > Registering a custom assembly in the Adam Database.
- Configure the viewsSetting
Change the feature below in the setting 'Record View Definition' when you would
like to get this functionality in the AssetStudio. Or change your own custom viewsSetting
when using this in a custom studio.
| XML |
1
|
<adam:mosaicitemtype>Adam.Web.Samples.MyRecordMosaicViewItem, Adam.Web.Samples</adam:mosaicitemtype>
|
Sample Code
The article contains sample code project(s).
You must be logged in to view or download sample code.
Sign in now