Skip to content

Xomino

Sharing, Collaborating and Learning.

  • Home
  • About
  • Demos
HomeIBM Social Business Toolkit

IBM Social Business Toolkit

IBMSBT in XPages: Tagging a file

April 21, 2015 Marky Roden IBM Social Business Toolkit, Java, JavaScript ibmsbt, Java, JavaScript, smartcloud

In this article I will show how to tag a file in IBM Smartcloud using the JavaScript API.

Introduction

Following on from the previous article on how to load a file into Smartcloud we will start from the point of the fileId has been returned to the screen via the upload partial refresh.

j2

Hang on what about the Java API?

Good question, I knew it was on your mind…….so there is a method to update a tag on a community file – but it is broken in the most recent version of Smartcloud. It has actually been fixed in the most recent GitHub version of the code but it is not available for download as of April 2015.

The bug is reported here https://github.com/OpenNTF/SocialSDK/issues/1624. The method SHOULD be updateCommunityFileMetadata and with that we could add TAGs as Metadata. That would be simple to add to the end of the “addFile” Java method. But alas we cannot.

Back to the Front End…..

So we have the file uploaded and we have the fileId. Looking at the Playground example code we can see the code for “Tagging” a file through the JavaScript API looks like this.

require([ "sbt/connections/FileService", "sbt/dom", "sbt/json" ], function(FileService, dom, json) {

	var fileService = new FileService();
	var fileId = "%{name=sample.communityFileId|helpSnippetId=Social_Files_Get_Community_Files}";
	var communityId = "%{name=sample.fileCommunityId|helpSnippetId=Social_Communities_Get_My_Communities}";

	fileService.updateCommunityFileMetadata({
		id : fileId,
		label : "New Label" + (new Date()).getTime(),
		summary : "New Summary",
		visibility : "public"
	}, communityId).then(function(file) {
		dom.setText("json", json.jsonBeanStringify(file));

	}, function(error) {
		dom.setText("json", json.jsonBeanStringify(error));
	});

});

In my example I return all the values I need back to the front end via the partialRefresh. The import parts at the fileId and the docId of the document. Using a class selector in jQuery I am able to extract these values when it comes time to do the tagging.

<xp:div id="fileIdWrapper" styleClass="row">
	<!-- fileId-->
	<xp:div  id="fieldId" styleClass="fileId">
		<xp:div>
			<xp:text escape="true" id="computedField1">
				<xp:this.value><![CDATA[#{javascript:viewScope.get("fileId");}]]></xp:this.value>
			</xp:text>
		</xp:div>
	</xp:div>
	<!-- docId-->
	<xp:div id="div1" styleClass="docId">
		<xp:text escape="true" id="computedField2">
			<xp:this.value><![CDATA[#{javascript:
				document1.getDocument().getUniversalID();}]]></xp:this.value>
		</xp:text>
	</xp:div>
</div>

To trigger this tagging after the partialRefvresh I wrap it all in a function, and call that function in the onComplete event of the partialRefresh.

The final code looks something like this for the button

<xp:button value="Add File" id="button1">
	<xp:eventHandler event="onclick" submit="true"
		refreshMode="partial" refreshId="fileIdWrapper">
		<xp:this.action><![CDATA[#{javascript:
			var uuid = compositeData.get('communityUuid');
			com.psclistens.sbt.Utils.addFile(uuid);}
		]]></xp:this.action>
		<xp:this.onComplete><![CDATA[
			tagFile();
		]]></xp:this.onComplete>
	</xp:eventHandler>
</xp:button>

and then for the actual tagFile function

function tagFile(){
	require([ "sbt/connections/FileService", "sbt/dom", "sbt/json" ], function(FileService, dom, json) {

		var fileService = new FileService();
		var fileId = $('.fileId').text().trim();
		var docId = $('.docId').text().trim();
		var fileTitle = $('.fileTitle').text().trim();
		var communityId = $('.communityId').text().trim();
		var tagArray = [];
		tagArray.push(docId)

		fileService.updateCommunityFileMetadata({
			id: fileId,
			tags: tagArray
		}, communityId).then(function(file) {
			dom.setText("json", json.jsonBeanStringify(file));
		}, function(error) {
			dom.setText("json", json.jsonBeanStringify(error));
		});

	});
}

One the file it loaded into Smartcloud it is then tagged with the docId of the document back in my XPages application. In this way we can start to see how tying the Smartcloud attachment back to the XPages application becomes possible.

j1

Conclusion
Unfortunately due to a bug in the currently release of SBT we are unable to use the Java API (unless we want to mess with it ourselves, which I don’t), so we have to use the JavaScript API. It means more code, but it is also more learning which is always good.

1 Comment

IBMSBT in XPages: Uploading a new file into Smartcloud

April 12, 2015 Marky Roden IBM Social Business Toolkit, Java, JavaScript IBM Smartcloud

In this article I will show how to upload a new file into IBM Smarcloud using the IBM Social Business Toolkit

Introduction

For the demonstration I am working on, I want to be able to upload a file into IBM Smartcloud and then Tag it with a value so that I may search by Tag at a later date. This article will discuss how to upload the new file and then in the next article I will discuss Tagging.

Uploading a file using Java

All Credit to this code goes to Toby Samples and it is published with his permission.

On the XPage we have the following:

  • xp:div control with the id fileIdWrapper
    • inside of that DIV we have a computed xp:text which is bound to the viewScope fileId value
  • A file upload control
    • Bound to viewScope.fileupload  (because we want it in Smartcloud we do not actually want it bound to the notes document)
  • A button
    • Clicking the button
      • Submits the file calling the com.psclistens.sbt.Utils.addFile(uuid) Java Method – In this case the CommunityId is being passed into my custom control as a Custom Property (communityUuid).
      • triggers a partialRefresh on the fileIdWrapper which should pull the new fileId up to the client
<xp:div id="fileIdWrapper" styleClass="row">
	<div class="col-sm-3">
		<xp:label for="fieldId" styleClass="control-label" value="File Id"></xp:label>
	</div>
	<div class="col-sm-9">
		<xp:div  id="fieldId" styleClass="fileId">
			<xp:div>
				<xp:text escape="true" id="computedField1">
					<xp:this.value><![CDATA[#{javascript:viewScope.get("fileId");}]]></xp:this.value>
				</xp:text>
			</xp:div>
		</xp:div>
	</div>
</xp:div>

<xp:fileUpload id="fileUpload1"
	value="#{viewScope.fileUpload}">
</xp:fileUpload>

<xp:button value="Add File" id="button1">
	<xp:eventHandler event="onclick" submit="true"
		refreshMode="partial" refreshId="fileIdWrapper">
		<xp:this.action><![CDATA[#{javascript:
			var uuid = compositeData.get('communityUuid');
			com.psclistens.sbt.Utils.addFile(uuid);}
		]]></xp:this.action>
	</xp:eventHandler>
</xp:button>

Before

j1

After

j2

The Java code within the Utils class looks like this. The interesting thing (which Toby figured out) was how the XSP model handles a file submitted and bound to the viewScope. The file is accessed using the UIFileuploadedEx.UploadedFile

public static void addFile(String communityUuid) throws FileNotFoundException, FileServiceException{
	Endpoint scEndpoint = getEndpoint();
	UIFileuploadEx.UploadedFile uf = (UploadedFile) ExtLibUtil.getViewScope().get("fileUpload");
	FileInputStream fis = new FileInputStream(uf.getUploadedFile().getServerFile().getAbsoluteFile());
	FileService fileService = new FileService(scEndpoint);
	File fileEntry = new File();
	//Upload the file
	fileEntry = fileService.uploadCommunityFile(fis, communityUuid, uf.getFilename(), uf.getUploadedFile().getContentLength());
	//Add the new FileID into a viewScope variable
	ExtLibUtil.getViewScope().put("fileId", fileEntry.getFileId());

}

From this we can then see the new file within Smartcloud and the fileId as part of the URL (ce6aeb0f-12ab-45e2-9cd5-570e3ac201b8)

j3

j4

 

Conclusion

Adding a file from an XPage into Smartcloud via the Java API is pretty straight forward and simple. Once it is up there though, how do you bring it back into your application so that it can be used……? 🙂

 

2 Comments

Recent Posts

  • Netrix Acquires PSC Group, a Provider of Cloud-Focused Application Development & Modernization Services
  • Cancel all running flow runs for a flow in an environment
  • Removing the social bar (“Like and Views”) from a SharePoint Online page
  • Thinking like a robot
  • Creating your first UI Flow

Archives

  • September 2021 (1)
  • June 2021 (1)
  • March 2021 (1)
  • October 2020 (4)
  • August 2020 (1)
  • April 2020 (3)
  • February 2020 (1)
  • January 2020 (2)
  • December 2019 (1)
  • November 2019 (1)
  • September 2019 (4)
  • August 2019 (5)
  • July 2019 (2)
  • June 2019 (4)
  • March 2019 (1)
  • February 2019 (1)
  • January 2019 (3)
  • November 2018 (1)
  • September 2018 (1)
  • August 2018 (2)
  • July 2018 (1)
  • June 2018 (6)
  • May 2018 (6)
  • April 2018 (1)
  • March 2018 (4)
  • February 2018 (2)
  • January 2018 (2)
  • October 2017 (1)
  • September 2017 (1)
  • May 2017 (2)
  • March 2017 (5)
  • February 2017 (4)
  • January 2017 (4)
  • December 2016 (1)
  • November 2016 (3)
  • October 2016 (2)
  • September 2016 (5)
  • August 2016 (5)
  • July 2016 (3)
  • June 2016 (4)
  • May 2016 (8)
  • April 2016 (1)
  • March 2016 (3)
  • February 2016 (3)
  • January 2016 (4)
  • December 2015 (1)
  • November 2015 (1)
  • October 2015 (2)
  • September 2015 (1)
  • August 2015 (6)
  • July 2015 (11)
  • June 2015 (9)
  • May 2015 (7)
  • April 2015 (7)
  • March 2015 (13)
  • February 2015 (6)
  • January 2015 (7)
  • December 2014 (7)
  • November 2014 (10)
  • October 2014 (7)
  • September 2014 (5)
  • August 2014 (7)
  • July 2014 (5)
  • June 2014 (1)
  • May 2014 (7)
  • April 2014 (4)
  • March 2014 (10)
  • February 2014 (8)
  • January 2014 (8)
  • December 2013 (5)
  • November 2013 (4)
  • October 2013 (4)
  • September 2013 (4)
  • August 2013 (7)
  • July 2013 (1)
  • June 2013 (10)
  • May 2013 (13)
  • April 2013 (9)
  • March 2013 (13)
  • February 2013 (7)
  • January 2013 (2)
  • December 2012 (3)
  • November 2012 (3)
  • October 2012 (4)
  • September 2012 (7)
  • August 2012 (5)
  • July 2012 (6)
  • June 2012 (8)
  • May 2012 (9)
  • April 2012 (12)
  • March 2012 (21)
  • February 2012 (18)
  • January 2012 (17)

Categories

  • Angular in XPages (19)
  • Angular.js (21)
  • Azure (7)
  • Azure Key Vault (1)
  • AzureDevOps (5)
  • Bluemix (33)
  • Bootstrap (6)
  • Bot Framework (7)
  • Chrome Dev Tools (6)
  • Collab365 (1)
  • Connections (3)
  • CSS (9)
  • Cypress.io (1)
  • DCLUG (9)
  • DevOps (2)
  • Docker (4)
  • dojo (21)
  • dojo selector (2)
  • Domino Data Services (1)
  • Eclipse (3)
  • Engage (1)
  • Extension Library (7)
  • EXTJS (21)
  • EXTJS in XPages (19)
  • FatRibs – Stuff my kids say (1)
  • FireBug (4)
  • GRANITE (1)
  • Guru Guidance (1)
  • HTML5 (8)
  • Hybrid Application (3)
  • IBM HTTP Server (IHS) (1)
  • IBM SBT (6)
  • IBM Social Business Toolkit (2)
  • IBMConnect (12)
  • IBMSBT (2)
  • Internet Of Things (1)
  • iOS (1)
  • Java (5)
  • JavaScript (64)
  • jQuery (72)
  • jQuery in XPages (38)
  • jQuery Mobile (3)
  • Just Marky (104)
  • LDC Via (1)
  • Learning (4)
  • Letsencrypt (4)
  • Lotus Notes (2)
  • Microsoft Graph (4)
  • MIME (1)
  • MVP (3)
  • MWLUG (13)
  • Nintex (1)
  • node.js (16)
  • NotesIn9 (10)
  • npm (3)
  • NWCJS (5)
  • O365 (18)
  • O365Token (1)
  • Office 365 (14)
  • Office Add-In (23)
  • Office Development (4)
  • OneUI (1)
  • OpenNTF (4)
  • Power Automate (1)
  • PowerPoint (2)
  • Predictive Analytics (2)
  • Problem solved (2)
  • Productive or Lazy? (13)
  • PSC (18)
  • PSC Labs (8)
  • R9 (3)
  • React (2)
  • REST (6)
  • RPA (2)
  • Salesforce (5)
  • Server Side JavaScript (2)
  • SharePoint (9)
  • SharePoint Framework (11)
  • SocialBizUg (4)
  • socket.io (2)
  • SonarQube (4)
  • Speaking (3)
  • SPFx (9)
  • SPFx PnP (2)
  • Taking Notes Podcast (2)
  • TeamStudio (2)
  • Tech Talks (10)
  • Thinking process (2)
  • Tools (2)
  • UI Flows (2)
  • UIPath (1)
  • Usability (1)
  • VBA (2)
  • Watson Service (2)
  • Web Components (1)
  • WebSockets (7)
  • WebSockets in XPages (4)
  • Webstorm (4)
  • Worklight (2)
  • x$ (12)
  • XPages (183)
  • XPages in Bluemix (10)
  • XPiNC (2)
Blog at WordPress.com.
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy
  • Follow Following
    • Xomino
    • Join 78 other followers
    • Already have a WordPress.com account? Log in now.
    • Xomino
    • Customize
    • Follow Following
    • Sign up
    • Log in
    • Report this content
    • View site in Reader
    • Manage subscriptions
    • Collapse this bar
 

Loading Comments...