dnnComposeMessage jQuery plugin

This article is for a specific plugin. Please be sure to read the Introduction and Overview to jQuery Plugins which provides an introduction to the plugins.

dnnComposeMessage»

This plugin provides the messaging capability that can be found on the messaging centre and member directory extensions introduced in DotNetNuke 6.2.0. It was a built as a reusable jQuery plugin so that it can be used by additional core and 3rd party extensions. To do so it's recommend that you use the Client Resource Management API to ensure only a single copy of the script is included and that it is minimized and compacted (if your install has chosen those options) e.g.

<dnn:DnnJsInclude ID="DnnJsInclude2" runat="server" FilePath="~/Resources/Shared/Components/Tokeninput/jquery.tokeninput.js" Priority="101" />
<dnn:DnnJsInclude ID="DnnJsInclude3" runat="server" FilePath="~/Resources/Shared/Components/ComposeMessage/ComposeMessage.js" Priority="102" />

Whilst it's not mandatory, it is recommended to also include the css file that provides for a common look & feel.

<dnn:DnnCssInclude ID="DnnCssInclude1" runat="server" FilePath="~/Resources/Shared/Components/Tokeninput/Themes/token-input-facebook.css" />
<dnn:DnnCssInclude ID="DnnCssInclude2" runat="server" FilePath="~/Resources/Shared/Components/ComposeMessage/ComposeMessage.css" />

There are a large number of options that can be set with the declaration of the control, below is an example

{
            openTriggerScope: '#<%= coreMessaging.ClientID %>',
            openTriggerSelector: '.ComposeMessage',
            title: '<%= DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("Title")) %>',
            toText: '<%= DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("To")) %>',
            subjectText: '<%= DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("Subject")) %>',
            messageText: '<%= DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("Message")) %>',
            sendText: '<%= DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("Send")) %>',
            cancelText: '<%= DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("Cancel")) %>',
            attachmentsText: '<%= DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("Attachments")) %>',
            browseText: '<%= DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("Browse")) %>',
            removeText: '<%= DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("Remove")) %>',
            messageSentTitle: '<%= DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("MessageSentTitle")) %>',
            messageSentText: '<%= DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("MessageSent")) %>',
            dismissThisText: '<%= DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("DismissThis")) %>',
            throttlingText: '<%= DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("Throttling")) %>',
            noResultsText: '<%= DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("NoResults")) %>',
            searchingText: '<%= DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("Searching")) %>',
            createMessageErrorText: '<%=DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("CreateMessageError"))%>',
            createMessageErrorWithDescriptionText: '<%=DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("CreateMessageErrorWithDescription"))%>',
            autoSuggestErrorText: '<%=DotNetNuke.UI.Utilities.ClientAPI.GetSafeJSString(LocalizeString("AutoSuggestError"))%>',
            showAttachments: <%= ShowAttachments %>,
            onMessageSent: function () {
                var context = ko.contextFor(document.getElementById($("#<%= coreMessaging.ClientID %>").attr("id")));
                if (!context.$root.showReplies()) context.$root.reloadBoxes();
}

Here is another option:

{
        $("#scope").dnnComposeMessage({
            openTriggerScope: "body",
            openTriggerSelector: ".ComposeMessage",
            onPrePopulate: function (target) {
                var context = ko.contextFor(target);
                var prePopulatedRecipients = [{ id: "user-" + context.$data.userId(), name: context.$data.displayName() }];
                return prePopulatedRecipients;
            },
            servicesFramework: this.servicesFramework
        });
}

The onPrePopulate function in the above example is used to provide recipients for the "Compose Message" dialog.