Basic Steps
3.
Create a project selecting
"Starter Plugin Project" template change the project name .
4.
Build the project and navigate to the
generated .a4t file.
5.
Drag and drop the file in alchemy
window.
You can read the basics of
an Alchemy plugin in the documentation
Lets update the files go to : PluginControllers.cs go to action methods and using CoreService client we can get the list of all users created in CM.
public string GetUserList(){List<TridionUserDetails> AuthorList = new List<TridionUserDetails>();var filter = new UsersFilterData { IsPredefined = false };var users = Client.GetSystemWideList(filter);foreach (TrusteeData user in users){AuthorList.Add(new TridionUserDetails(user.Id, user.Description,user.Title, user.IsEditable));}}var output = JsonConvert.SerializeObject(AuthorList);return output.ToString();}
public class TridionUserDetails
{
private string tcmuri;
private string name;
private string title;
private bool? isEditable;
public TridionUserDetails(string tcmuri, string name, string title, bool? isEditable)
{
this.tcmuri = tcmuri;
this.name = name;
this.title = title;
this.isEditable = isEditable;
}
public string Tcmuri
{
get { return tcmuri; }
set { tcmuri = value; }
}
public string Name
{
get { return name; }
set { name = value; }
}
public string UserId
{
get { return title; }
set { title = value; }
}
public bool? IsEditable
{
get { return isEditable; }
set { isEditable = value; }
}
}
Here, i have converted the output into JSON :) .later on you can consume this JSON on the popup window using Javascript e:g angular.js.
Command.JS file
/**
* Creates an anguilla command using a wrapper
shorthand.
*
* Note the ${PluginName} will get replaced by
the actual plugin name.
*/
Alchemy.command("${PluginName}", "GetUserList", {
/**
* If an init function is created, this
will be called from the command's constructor when a command instance
* is created.
*/
init: function () {
},
/**
* Whether or not the command is enabled
for the user (will usually have extensions displayed but disabled).
* @returns {boolean}
*/
isEnabled: function () {
return true;
},
/**
* Whether or not the command is available
to the user.
* @returns {boolean}
*/
isAvailable: function () {
return true;
},
/**
* Executes your command. You can use
_execute or execute as the property name.
*/
execute: function () {
var progress = $messages.registerProgress("Getting ready to GetUserList...", null);
// This
is the Promise pattern that the webapi proxy js exposes. Look at another
example to
// see
how the callback method can also be used. Your WebAPI controller's route and
route prefix
//
attributes controls how the namespace is generated.
Alchemy.Plugins["${PluginName}"].Api.Service.GetUserList()
.success(function (message) {
//first
arg in success is what's returned by your controller's action
$messages.registerGoal(message);
})
.error(function (type, error) {
//
first arg is string that shows the type of error ie (500 Internal), 2nd arg is
object representing
//
the error. For BadRequests and
Exceptions, the error message will be in the error.message property.
$messages.registerError("There was an error", error.message);
})
.complete(function () {
//
this is called regardless of success or failure.
//
progress.finish();
});
}
});
If you wants to open pop-up then you need to create .aspx page in the views folder
var url = "${ViewsUrl}/ListOfUsers.aspx?uri=" + message;
popup
= $popup.create(url, "menubar=no,location=no,resizable=no,scrollbars=yes,status=no,width=800,height=800", null);
popup.open();
PluginCommandSet.CS
public PluginCommandSet()
{
// we
only need to add the name of our command
AddCommand("GetUserList");
}
PluginContextMenuExtension.CS
public PluginContextMenuExtension()
{
AssignId = "";
// Use
this property to specify where in the context menu your items will go
InsertBefore = Constants.ContextMenuIds.MainContextMenu.SendItemLink;
// Use
AddItem() or AddSubMenu() to add items for this context menu
// element id title command name
AddItem("Get_User_List_cm", "GetUsersList", "GetUsersList");
// Add a
dependency to the resource group that contains the files/commands that this
toolbar extension will use.
Dependencies.Add<PluginResourceGroup>();
// apply
the extension to a specific view.
Apply.ToView(Constants.Views.DashboardView);
}
PluginResourceGroup.CS
public PluginResourceGroup()
{
// only
the filename of our JS files are needed
AddFile("Command.js");
// only
the filename of our CSS files are needed
AddFile("Styles.css");
// add
genertic type param to reference our command set
AddFile<PluginCommandSet>();
// Adds
the web api proxy JS to this resource group... this allows us to call
// our
webapi service without any 3rd party libs.
AddWebApiProxy();
//
AddWebApiProxy() includes Alchemy.Core as a dependency already... if not using
// the
proxy you can remove the comment from below.
//
Dependencies.AddAlchemyCore();
}
PluginRibbonToolbarButton.CS
public PluginRibbonToolbarButton()
{
// The
unique identifier used for the html element created.
AssignId = "GetUsersListButton";
// The
name of the command to execute when clicked
Command = "GetUsersList";
// The
label of the button.
Name = "GetUsersList";
// The
page tab to assign this extension to. See Constants.PageIds.
PageId = Constants.PageIds.HomePage;
//
Option GroupId, put this into an existing group (not capable if using a .ascx
Control)
GroupId = Constants.GroupIds.HomePage.ShareGroup;
// The
tooltip label that will get applied.
Title = "GetUsersList";
// Add a
dependency to the resource group that contains the files/commands that this
toolbar extension will use.
Dependencies.Add<PluginResourceGroup>();
// apply
the extension to a specific view.
Apply.ToView(Constants.Views.DashboardView, "DashboardToolbar");
}
And Image files in the Images folder and update the Style.css.i have added two files user16.png and user32.png
/**
* Style the context menu button...
#Get_User_List_cm is defined in our Context Menu Extension class' AssignId property
*/
.contextmenu #Get_User_List_cm> .image {
background-image: url('${ImgUrl}user16.png');
}
/**
* Style the ribbon tool bar button...
#GetUsersListButton is defined in our Ribbon Toolbar Button class' AssignId
property
*/
/* main icon in full ribbon
mode */
.ribbontoolbar #GetUsersListButton.button .image, .ribbontoolbar #GetUsersListButton.button .image
{
background-image: url('${ImgUrl}user32.png');
}
/* main icon in minimized
ribbon mode */
.ribbontoolbar.minimized #GetUsersListButton.button .image, .ribbontoolbar.minimized #GetUsersListButton.button .image
{
background-image: url('${ImgUrl}user16.png');
}
After Updating all the
files built your project and navigate to the generated
.a4t file
Open Alchemy In CM and Drag and drop the .a4t file in alchemy window.
Refresh the CM session and go to Content Explorer
Here you can see new option is added which is GetUserList click on it and you will get the list of users
