Patrick Lamber | Developers

Patrick Lamber

SharePoint consultant, speaker, blogger, and geek.

365 Tube: a first tour

365 Tube is a project to verify the feasibility of an enterprise-2.0 version of a YouTube-like podcast library based in the cloud. The project can be downloaded from Codeplex http://365tube.codeplex.com/ and used for free. Using the code and instructions posted here everyone can setup a private YouTube-like video library, e.g. for enterprise-2.0 - in a few hours, completely built on cloud components. It also demonstrates how application design has chanced from code-centric (in original pks) to service-centric cloud-modules, scaling from a handful of users up to 10.000s. Why having a private E2.0 video library? Such a library can be used for various training and communication purposes. e.g. CxOs explaining business strategy or quarterly results (businessTV) Roll-out of new SW, e.g. corp-wide Win7 rollout (change management) Training programs, e.g. ITIL training (training) Quality-Awards etc. (celebration) best-practice sharing of any kind Considering time, travel and media savings plus productivity increase companies usually experience high ROIs. Channels may be restricted to certain departments or open for all employees. Material may vary from instant-recording to professional HDTV. In this blog series we are going to see how the demo environment will look like and how to set it up on your own Office 365 environment. The ingredients for this solution are: Office 365 E plan (request a free trial on http://www.microsoft.com/en-us/office365/) Amazon AWS Account (request a free trial on http://aws.amazon.com/free/) Transloadit.com Account (request an account here http://www.transloadit.com) Our 365 Tube demo wsp (download it for free on http://365tube.codeplex.com/) Office 365 will be used for the look & feel and user interaction. We will find there the social capabilities of SharePoint (Ratings, Comments, and MySites). Amazon S3 will be used to store all the videos and thumbnails we are uploading to our 365 Tube environment. Last but not least, Transloadit is used to transcode the uploaded videos and extract the preview thumbnails for our application. It is also responsible to store the videos and thumbnails directly on our Amazon S3 storage in the cloud.As you can see, there are no on-premise services at all. We will rely on cloud services only. A first tour But before we start setting-up our demo environment, I would like to show you how it will look like with some screens. The next picture shows how it will look like when you are entering the site for the first time. You will find three sections showing the latest features, uploaded, and highest rated videos. In the upper right corner you will find a video upload button and a podcast recording button. Latter service allows you to record a podcast directly without having video recording software installed. The service is provided by the third party solution http://www.screencast-o-matic.com. Whenever you upload a video you will be prompted with the screen below. You simply need to choose a video to upload and press “Upload”. This triggers a video upload to the Transloadit.com service, which in turn is responsible to transcode the video into mp4 format and extracting the thumbnails from it. These videos are going to be stored directly on our Amazon S3 store. After the video is processed, you will be redirected to a standard SharePoint Display form. In the background, the form will already contain all Amazon S3 URLs for video and thumbnails. The end-user is not able to see these fields with the help of the Codeplex solution LFMF that I build some time ago (http://listformmanipulation.codeplex.com/). you probably noticed that the author field is pre-filled with the currently logged-in user. The technique for it was already explained in one of my preceding blog posts (http://www.lamber.info/post/2012/04/14/LFMF-–-How-do-I-assign-the-current-user-to-a-SharePoint-form.aspx) After you filled out the metadata and pressed save, the video details are stored also in SharePoint. As you probably already noticed, the videos and thumbnail files are not stored in Office 365, but in Amazon S3. In that way we will not have any storage limitations and issues with our Office 365 account. Office 365 only stores the metadata and links to video files and thumbnails. Finally, when clicking on a video you will be presented with a SharePoint Dialog. In this dialog you are able to play back the video, rate it, and give some comments: Setting-up the demo environment That is more or less everything to show for now. If you are interested in setting up the environment for yourself and play around, then follow the next blog posts: 365 Tube: Setting-up Amazon S3 365 Tube: Setting-up Transloadit.com 365 Tube: Setting-up Office 365 Summary With this blog post we saw how the 365 Tube project is looking like and how to setup the environment for our own. As already mentioned, this first version is a feasibility study and not a fully functional product. It shows, however, that with some good ideas and a mixture of cloud services we are able to provide an interesting service. We will extend our solution with more functionality in future. If you are interested in getting in touch with the project leads just check out our Codeplex page http://365tube.codeplex.com/.   Stay tuned, Patrick

We are almost done. In this blog post we are going to see how to finalize our configuration of 365 Tube, our Youtube-like Podcast library for Office 365 (http://365tube.codeplex.com/). The last step is the creation of a new site collection on our Office 365 Plan E environment and deploy the WSP package that you can find directly here http://365tube.codeplex.com/releases/view/86355. The steps to follow are: Create a new site collection with a custom template Upload the 365 Tube wsp file and activate it Open SharePoint 2010 Designer to configure the connection between Office 365 and Transloadit.com Create a site collection Go and create a new site collection on your Office 365 administrative console. Create a new site collection. Specify the name you like but ensure to choose to select a template later on (located in the “Custom” tab): The creation of the site collection will take a moment. Upload the 365 Tube wsp and activate it In this step we access the site collection that we created before. We are not going to choose the template from the standard templates, but upload our WSP template that you can download from Codeplex http://365tube.codeplex.com/releases/view/86355. We have to click on “Solution Gallery” and upload the WSP file. The next screen should appear. Activate the solution. When reopening the page we should be able to find a new template under the tab “Custom”. Choose the 365 Tube template and confirm the site creation. this operation might take some time. You might even encounter a page not found. Just wait a couple of minutes and try to login again to the page. Finalize the configuration If everything went fine, then you should see a page similar to next screen. We finalize our configuration by telling our 365 Tube solution which Transloadit.com template to use when uploading new videos. We saved the Transloadit.com auth key and template id on our last blog post. Now we are going to integrate them into the 365 Tube solution. This step is easily done by using SharePoint 2010 Designer. Simply open the site collection and locate the Upload.aspx file in the root folder as shown in the next picture: Locate on this page the row with the hidden input field: <input type="hidden" name="params" value="{&quot;auth&quot;:{&quot;key&quot;:&quot;your_transloadit_auth_key&quot;},&quot;template_id&quot;:&quot; your_transloadit_template_id&quot;,&quot;redirect_url&quot;:&quot;http://example.org/upload&quot;}" /> Replace the “your_transloadit_auth_key” and “your_transloadit_template_id” with the auth key and template id we created before and save the page. We are ready to use the solution now. Summary In this last blog post we saw how to finalize the configuration of the 365 Tube project located on http://365tube.codeplex.com/. Just get in touch with us through the Codeplex project page if you have further questions.   Stay tuned, Patrick

In this blog post we are going to see how to configure the Transloadit.com service for our 365 Tube project (http://365tube.codeplex.com/). Transloadit.com will be responsible for transcoding our uploaded video to mp4 and extract thumbnails from them. These videos are then stored directly on our Amazon S3 storage we created before. Hence, Transloadit.com has to know how to communicate with Amazon S3. Transloadit.com (http://www.transloadit.com) allows to create transcoding templates that process our videos like we want. After you created your account, go and create in the Template section a new template. Copy the contents of the code snippet below into the template section. Please change the “key” and “secret” values with the Amazon AWS authorization key and secret key we created before. Please also change the bucket destinations if you used a different bucket name than the names specified in our example. { "steps":{ "encode480":{ "use": ":original", "robot": "/video/encode", "preset": "iphone" }, "encode1024":{ "use": ":original", "robot": "/video/encode", "preset": "ipad" }, "thumbs":{ "use": "encode480", "robot": "/video/thumbs", "count": 6 }, "export_t":{ "use": "thumbs", "robot": "/s3/store", "acl": "public-read", "bucket": "podcastkitthumbs", "key": "your_amazon_access_key", "secret": "your_amazon_secret_key" }, "export_v480":{ "use": "encode480", "robot": "/s3/store", "acl": "public-read", "bucket": "podcastkitvideo", "key": "your_amazon_access_key", "secret": "your_amazon_secret_key" }, "export_v1024":{ "use": "encode1024", "robot": "/s3/store", "acl": "public-read", "bucket": "podcastkitvideo", "key": "your_amazon_access_key", "secret": "your_amazon_secret_key" } } } we only need the amazon access key and Amazon secret key in Transloadit.com. That means that your access key and secret keys are not exposed to end-users at all. Please save the Template id of Transloadit.com because we are going to need it in our 365 Tube project that we are going to deploy on Office 365. Before, proceeding with the next steps, you might also want to test the template configuration directly on Transloadit.com. In that way we ensure that everything works as expected when interacting with Office 365. Last but not least, we have to write down the Transloadit.com Auth key. Also this key is going to be used by our Office 365 solution. You can retrieve your authentication key by  selecting “Account Settings” –> “API Credentials” in Transloadit.com. Summary In this blog post we saw how to configure Transloadit.com to upload the 365 Tube (http://365tube.codeplex.com/) videos and thumbnails in Amazon S3. Please save the Template Id and Auth Key of Transloadit.com for the next and last configuration step.   Stay tuned, Patrick

In this blog post we are going to see how to setup the Amazon S3 account necessary for our 365 Tube environment presented on Codeplex http://365tube.codeplex.com/. As you already know, Amazon S3 will be used as cloud service to store all videos and thumbnails that are transcoded by the Transloadit.com service. Latter is used by 365 Tube to upload the videos and link them with Amazon S3, respectively. For this demo we are going to create following elements: Two S3 buckets: these buckets will store our videos and video thumbnails of 365 Tube Authentication and Security Key to upload content If you do not already have an Amazon AWS account, then register an account for free directly on this page http://365tube.codeplex.com/. Afterwards, login to the Amazon S3 console by using this link: https://console.aws.amazon.com/s3/ Amazon S3 allows you to store content in containers called buckets. We are going to create a bucket for the video and another one for the thumbnail storage. You can call them with any name you like. Please consider to use lower letters and to change the names also in our future blog articles when configuring Transloadit.com. For demonstration purposes we are going to call the buckets: podcastkitthumbs podcastkitvideos With the buckets created, let us generate a security key used for the communication between the Transloadit.com service and Amazon S3. Go to the “Security Credentials” page of your account. You should see in the middle of the page a section similar to the next screen. Please create a separate access key by using the link “Create a new Access Key”. Copy the Access Key ID and the Secret Access Key. In my specific case I have the Access Key ID “AKIAJEMJTVOBLQ7XCCEQ” and secret key “kHtP34W/Nt4vFrSy3HoHRF9cYzJ9IOMbqY4r+rbD”. Save your keys because we are going to need them in the Transloadit.com service. You can create only two Access keys. You can disable them anytime (as I did J for this demonstration). Summary In this blog post I showed you how to setup the Amazon S3 account to store the video and thumbnails that we are going to process with the Transloadit.com service. Please write down the bucket names, Access Key, and Secret Access Key because we are going to need them later on.   Stay tuned, Patrick

In this blog post I am going to show you how you can assign the currently logged in user to a user and group form field control by using the ECMA Client Object Model and the latest version of the List Form Manipulation Framework (LFMF) that you can download for free on Codeplex. This code sample can also be used to understand how to retrieve the currently logged in user by using ECMA Client Object Model. First of all, upload and activate LFMF on your site collection and create a simple task list. We will populate the Task list with the currently logged in user. Go and modify the LFMF config.js in your site collection located under “/Style Library/LFMCoreModules/LFMConfig.js” and replace its contents with following code: var context = null; var web = null; var currentUser = null; function fillOutUserData() { context = new SP.ClientContext.get_current(); web = context.get_web(); currentUser = web.get_currentUser(); currentUser.retrieve(); context.load(web); context.executeQueryAsync(Function.createDelegate(this, this.onfillOutUserDataSuccess), Function.createDelegate(this, this.onfillOutUserDataFailure)); } function onfillOutUserDataFailure(sender, args) { alert('Not able to retrieve the current user: ' + args.get_message() + '\n' + args.get_stackTrace()); } function onfillOutUserDataSuccess(sender, args) { var user = web.get_currentUser(); var email = user.get_email(); var author = new qppfSPFormField("Assigned To", "SPFieldUser"); if (email != undefined && email != "") { author.setValue(email); } else { author.setValue(user.get_loginName()); } } $(document).ready(function () { // put your configuration here // this code is executed on every page load if (window.location.href.indexOf("/Lists/Tasks/NewForm.aspx") > -1) { ExecuteOrDelayUntilScriptLoaded(fillOutUserData, "sp.js"); } }); Consider to clear always your browser cache to avoid having old versions of your JavaScript code when loading the page. As you can see from the code above the relevant part of LFMF is just line 22, 24, and 27. The rest of the example is ECMA Script code to retrieve the current logged in user. Let us analyze the code snippets step by step: $(document).ready(function () { // put your configuration here // this code is executed on every page load if (window.location.href.indexOf("/Lists/Tasks/NewForm.aspx") > -1) { ExecuteOrDelayUntilScriptLoaded(fillOutUserData, "sp.js"); } }); As you probably already know, the LFM Framework works with jQuery. Hence, we have to guarantee that our JavaScript code is launched when the document is ready. Since the LFMConfig.js is called on every page load, we have to distinguish our code parts by using the if statement on line 4. function fillOutUserData() { context = new SP.ClientContext.get_current(); web = context.get_web(); currentUser = web.get_currentUser(); currentUser.retrieve(); context.load(web); context.executeQueryAsync(Function.createDelegate(this, this.onfillOutUserDataSuccess), Function.createDelegate(this, this.onfillOutUserDataFailure)); } This code snippet calls the ClientContext of the Client Object Model and prepares a request to retrieve the current user data. This information is retrieved from the current user property from the current web object. The “executeQueryAsync” method starts an asynchronous call that might either succeed or fail. We are going now to see what happens if the request succeeds. function onfillOutUserDataSuccess(sender, args) { var user = web.get_currentUser(); var email = user.get_email(); var author = new qppfSPFormField("Assigned To", "SPFieldUser"); if (email != undefined && email != "") { author.setValue(email); } else { author.setValue(user.get_loginName()); } } If the request succeeds, the code listed above will be executed accordingly. Line 2 retrieves the current user data while line 3 we are retrieving the user’s e-mail address (works well in Office 365). Then LFMF comes in action and binds the “Assigned To” field of the form. Last but not least, if the user’s e-mail was successfully retrieved, then it is going to be assigned to the “Assigned to” field. If this is not the case, then the system tries to fall back and retrieve the current login name of the user and assign it to the “Assigned to” field. The rest is history .   Hope this helps, Patrick

Recent Comments

Comment RSS

Page Visitors

 

Control panel