Slack integration

Custom control e.g. ccSlack.xsp:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

	<xp:scriptBlock id="scriptBlock1">
		<xp:this.value><![CDATA[function postMessageToSlack(url){
	webhook_url = url;
    console.log('webhook:' + webhook_url);
    payload= JSONStr;
    console.log('payload:' + payload);
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open('POST', webhook_url, false);
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send(payload);
    console.log('response:' + xmlhttp.responseText);
}
var webhook = '#{javascript:compositeData.webhook}';
var user_name = '#{javascript:compositeData.user_name}';
var user_icon = '#{javascript:compositeData.user_icon}';
var author_name = '#{javascript:compositeData.author_name}';
var author_link = '#{javascript:compositeData.author_link}';
var author_icon = '#{javascript:compositeData.author_icon}';
var pre_text = 'Someone would like to have your attention for the following:';
var title = '#{javascript:compositeData.title}';
var ref_url = '#{javascript:compositeData.ref_url}';
var ref_label = '#{javascript:compositeData.ref_label}';
var ref_descr = '#{javascript:compositeData.ref_descr}';
var thumb_url = '#{javascript:compositeData.thumb_url}';

var JSONStr = 'payload= {"username": "' + user_name + '" ,"icon_url": "' + user_icon + '","attachments": [{"fallback": "This attachement is not supported.","title": "' + title + '","color": "#9C1A22","pretext": "' + pre_text + '","author_name": "' + author_name + '","author_link": "' + author_link + '","author_icon": "' + author_icon + '","fields": [{"title": "URL","value": "_<' + ref_url + '|' + ref_label + '>_","short": true}, {"title": "Description","value": "' + ref_descr + '","short": true}],"mrkdwn_in": ["text", "fields"],"text": "Just click the *link below* to open the mentioned page.","thumb_url": "' + thumb_url + '"}]}';]]></xp:this.value>
	</xp:scriptBlock>
	<xp:button value="Mention in Slack" id="btnSlack"
		styleClass="btn btn-primary">
		<i class="fa fa-slack" aria-hidden="true"></i>
		&#160;
		<xp:eventHandler event="onclick" submit="false">
			<xp:this.script><![CDATA[postMessageToSlack(webhook);]]></xp:this.script>
		</xp:eventHandler>
	</xp:button>
	</xp:view>

ccSlack.xsp-config:

<?xml version="1.0" encoding="UTF-8"?>
<faces-config>
  <faces-config-extension>
    <namespace-uri>http://www.ibm.com/xsp/custom</namespace-uri>
    <default-prefix>xc</default-prefix>
  </faces-config-extension>
  <composite-component>
    <component-type>ccSlack</component-type>
    <composite-name>ccSlack</composite-name>
    <composite-file>/ccSlack.xsp</composite-file>
    <composite-extension>
      <designer-extension>
        <in-palette>true</in-palette>
        <render-markup>&lt;?xml version="1.0" encoding="UTF-8"?&gt; &#xd;
&lt;xp:view xmlns:xp="http://www.ibm.com/xsp/core"&gt; &#xd;
	&lt;div style="border: 2px dotted #CCC; padding: 5px; margin: 3px;"&gt;&#xd;
	&lt;h3&gt;ccSlackMessage&lt;/h3&gt;&#xd;
	&lt;div&gt;&#xd;
	Integration with Slack. Post a message to a channel in Slack.&#xd;
	&lt;/div&gt;&#xd;
&lt;/div&gt;&#xd;
&lt;/xp:view&gt;</render-markup>
      </designer-extension>
    </composite-extension>
    <property>
      <property-name>author_name</property-name>
      <property-class>string</property-class>
      <description>name of the user who has initiated the message broadcast e.g. current user</description>
    </property>
    <property>
      <property-name>author_link</property-name>
      <property-class>string</property-class>
      <description>link to an author profile e.g. IBM Connections, Twitter, Facebook...</description>
    </property>
    <property>
      <property-name>webhook</property-name>
      <property-class>string</property-class>
      <description>Incoming Webhook URL of Slack channel. Go to http://yourteam.slack.com/apps/build/custom-integration and click on Incoming Webhooks to register a Webhook.</description>
    </property>
    <property>
      <property-name>user_name</property-name>
      <property-class>string</property-class>
      <description>the name that will be used as sender of the message. could be application name or generic title.</description>
    </property>
    <property>
      <property-name>user_icon</property-name>
      <property-class>string</property-class>
      <description>icon to identify the sender</description>
    </property>
    <property>
      <property-name>title</property-name>
      <property-class>string</property-class>
    </property>
    <property>
      <property-name>author_icon</property-name>
      <property-class>string</property-class>
      <description>icon for the sender</description>
    </property>
    <property>
      <property-name>ref_url</property-name>
      <property-class>string</property-class>
      <description>the url to point to in the message</description>
    </property>
    <property>
      <property-name>ref_label</property-name>
      <property-class>string</property-class>
      <description>the label of the reference</description>
      <property-extension>
        <designer-extension>
          <default-value>label missing</default-value>
        </designer-extension>
      </property-extension>
    </property>
    <property>
      <property-name>ref_descr</property-name>
      <property-class>string</property-class>
      <description>a discription of the url</description>
      <property-extension>
        <designer-extension>
          <default-value>description missing</default-value>
        </designer-extension>
      </property-extension>
    </property>
    <property>
      <property-name>thumb_url</property-name>
      <property-class>string</property-class>
      <description>url to thumbnail to empower your message in slack / give a preview</description>
    </property>
  </composite-component>
</faces-config>

Sample how embedded on another custom control or xpage:

					<xc:ccSlack
		webhook="https://hooks.slack.com/services/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AVC"
		user_name="#{javascript:return database.getTitle();}"
		title="Take a look at this picture uploaded in Bildr"
		ref_label="some label" ref_descr="some description"
		thumb_url="http://icons.iconarchive.com/icons/dtafalonso/android-lollipop/512/Camera-Moto-icon.png">
		<xc:this.author_name><![CDATA[#{javascript:var currUser:NotesName = session.createName(session.getEffectiveUserName());
return currUser.getCommon();}]]></xc:this.author_name>
		<xc:this.author_link><![CDATA[#{javascript:prefix = "http://www.linkedin.com/in/";
var currUser:NotesName = session.createName(session.getEffectiveUserName());
return prefix + @ReplaceSubstring(currUser.getCommon()," ","");}]]></xc:this.author_link>
		<xc:this.user_icon><![CDATA[#{javascript://http://Host/Database/$icon?OpenIcon
var host_name = context.getUrl().toString().split(view.getPageName())[0];
var icon_path = "/$icon?OpenIcon";
return host_name + icon_path;

//return "example.com/img/icon.jpg";}]]></xc:this.user_icon>
		<xc:this.author_icon><![CDATA[#{javascript:var random = @Integer(Math.floor(Math.random()*2));
var pics = new Array();
pics.push("http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/User-Administrator-Blue-icon.png");
pics.push("http://icons.iconarchive.com/icons/hopstarter/sleek-xp-basic/256/Office-Girl-icon.png");

return pics[random];}]]></xc:this.author_icon>
		<xc:this.ref_url><![CDATA[#{javascript:var url =  context.getUrl();
//url.removeAllParameters();
return url}]]></xc:this.ref_url>
	</xc:ccSlack>