Getting Started

 

Tradeshift is a global business network that allows anyone to exchange invoices for free.. but it won't be just invoices any more! With the Tradeshift Apps framework, you are now able to extend our services with any feature you can think of for a business-to-business network. You can even make money in the process by selling your app to users in the Tradeshift App marketplace. Harness the power of a global business network! With knowledge of Javascript, CSS, HTML and with a good idea you can change the way people do business around the world!

Creating apps in Tradeshift means (in most cases) extending the existing user interface you see in the web application. This is why we also call Tradeshift apps embedded apps. So, the code you make will usually create new UI elements: boxes, buttons, inputs, text, etc. Apps can be embedded in two ways, either as iframes or directly injected into the existing markup, which is what we will call inline apps. An example of how to create an inline app is described below.

Sign up to Tradeshift Sandbox

You have to have an activated Tradeshift Sandbox account to be able to develop apps. If you don't already have one you can sign up here; it's a pretty quick and straightforward process.

Open the Tradeshift App Editor

Once you have logged into Tradeshift sandbox, go to the App Editor from any modern browser (excluding all versions of Internet Explorer, which are not supported at the moment for development, on the other hand running released apps is intended to work in IE).

You will see all your existing apps, but let's not worry about those now. Click on Create new App to create your first app and name it Hello World for convenience.

Double click your newly created app to get your hands dirty and start coding!

Insert code

{
	"manifest_version": "1.0",
	"tradeshift_version": "2.0",
	"vendor_id": "TradeshiftTutorials",
	"app_id": "HelloWorld",
	"version": "1.0",
	"comments": "Comment on anything. Comments are private.",
	"default_locale": "en-GB",
	"locales": {
		"en-GB": {
			"app_name": "Hello World",
			"app_desc": "This is my Hello World app.",
			"hello_world": "Hello World"
		}
	},
	"images": {
		"ts-icon-small.png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Rjc5NzJDQ0I0MzVEMTFFMDgxNERFMTZDNzE3MTA4OTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Rjc5NzJDQ0M0MzVEMTFFMDgxNERFMTZDNzE3MTA4OTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGNzk3MkNDOTQzNUQxMUUwODE0REUxNkM3MTcxMDg5MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGNzk3MkNDQTQzNUQxMUUwODE0REUxNkM3MTcxMDg5MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqZwQNIAAAFqSURBVHjaYvz//z8DLQETA40Bi7SETDuQFgPif3hV/v/HzMDEvJo1b9kZRnn9ZobfP1hAogQc/xqkqBCI2Qk65R/Qfh6hT4yCUi8Y/v1JJ9IDn0C2/CDav////wD65C8JIQT25lUglkDzLiOUBolzEWHQYyD+iaQPZsYzkAXWaBLIYBMQ+xAwHOQjbyC+gs3PLDAGhYnlHy4zqJVMGQcsH4xaMGrBMLCAG43PgUUPMxRjrw8IWLAeiB+CiwJGRiaGPz8P/v/55RUjn+g8pBwMKote4ymBwUVIAhDXQzEyEABiBRxaHbDIJaCbDfPuBSAOAOKDSIpAdD4Qz4daBLLcAGpwApLhAVA5ED8eqqYeqgfFgg9AfACqiAFKH4SKgSyZCMT9QGwPxPJArA811B9JPQNSKCjgiuQPaF5VgIo5IIkdhIoxQF2MDC5AXe+AHAfICgWgbAOksIbRsDhBpmFqFaA03HCQ2QABBgD1olxj+l5EUAAAAABJRU5ErkJggg==",
		"ts-icon-medium.png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Rjc5NzJDQ0Y0MzVEMTFFMDgxNERFMTZDNzE3MTA4OTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Rjc5NzJDRDA0MzVEMTFFMDgxNERFMTZDNzE3MTA4OTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGNzk3MkNDRDQzNUQxMUUwODE0REUxNkM3MTcxMDg5MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGNzk3MkNDRTQzNUQxMUUwODE0REUxNkM3MTcxMDg5MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhVHHMAAAAKbSURBVHja7FpBa1NBEJ5N0hiMwtNgESo0ghdFJJ499NljL43/IF68Cemh54cn9VQ9CYJEf0F77+EV721zEA+10NJe2ovGIlTSJOtsMqvr8pK8vm6sgRn48vbt7O7MtzszKZsKKSWMs6RgzIUJnLdkpq7feIHPW4iWy3VByi/QaQUTT942xd3ZB9A8for9AuEq6SYQ6xn8KBOBtkMCaZCdLbiQfw5Xp5rQad/BvkeOCSjfr3U/ugZ7cCdSTkI2lxOXC0dIpoA92RFEUCHlOHRMaYGq0Z3uwbZHZYOr0P9AID/G/l9USbyImI4ZpzrRVSWZQ9xzlfKId4hDqlQQ05fPisCbhEavOCbwErH9L3PAdVm8xH8LMQEmwASYABNgAkyACTABJsAEmAATYAJMIJbkhujzIFIC0urmRmZj+JHocjlzBgIfEZOIkwhdGlLpPfjx9UjufwJxe2YD2serEH15pi6yfiIOkjgh1AWyEKKI7WKEvoGoj+Dktb21pGN+/zhJjQB6t2M2wiGOLBFOK9pe4jHK767vREAx9RFVmlSj99IQI2EEyRLN9SLGe33W9GiOP4DAX+vaBLT4NCkY4KTWhxEnVTP6vhnOKv0mYofapnNlamv9DjlpjqnRepvUV9YEzlKFHlJ8rlFbka8gFqB38btLhs0dfE16e/cfI+7TsxhxShWyo8d4o/gemKHnK0r+FcuROunsolCnueGAnHtvnNS8ucZpCXgDdN+N6qHHNqyK1i+P1Jxn0PslM8rmB8RN2n3fDPE4BHZp0pIVEtoprVuh92V6r9LOxRFNbr4PAZ03DQNWPf2ze4FVDTxyPKRjNPV6fMWI82XDoBnDFatYBEYShzSvSv0la4xvrKs2x9NJLPi/Vc5ZfgkwAE481UwN39fkAAAAAElFTkSuQmCC",
		"ts-icon-large.png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Rjc5NzJDQzc0MzVEMTFFMDgxNERFMTZDNzE3MTA4OTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Rjc5NzJDQzg0MzVEMTFFMDgxNERFMTZDNzE3MTA4OTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMTJGNDAyMDQzNUQxMUUwODE0REUxNkM3MTcxMDg5MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGNzk3MkNDNjQzNUQxMUUwODE0REUxNkM3MTcxMDg5MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Psv2hZkAAAUMSURBVHja7JpNayRFGIBrkhb1ZOMXgsJODt4Es+DJy05+QZKTsgiZeBFB3OQXTBYPIgjZ4N1JbsoeEv+AmewueEx78GzWiwiCfdH1c8e38W0oyuqe7ulOZqb7eeDNTOajprrqqaq3aqYzHo8NtJclmgABAAEAAQABAAEAAQABAAEAAQABAAGg0QQvv/TKTbn9SCJswfX+I/GlxK7E3+aPX83SG+smePczY/58lL5mU+ITieca3hYXEu8F8udA4vkWSf+BxF2Je57nliU+lni1Be3wrMT7yRIQtHDmeyHj8eWWtUeQCPC4hQI8nvK5xrUDSSC7AEAAQABAAEAAQABAAEAAQABAAGiFAAHN0FqWEwF+ph1aS5yM/nckPjT//SDkKr4J60g8WeB1r0m82KDGTn6Mcl/itxnXo6O3P0h8mgjwjca88YXEWw0S4HeJtyV+IgksuD41cMp9ml0AIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACXD2dGV13BwGaX7dHGY+PJYJL+syntPy5IphjAe5KvCnxRM3lfifxIOO5vyQ+l7h1CTPB1xI/zt00Ox6PDZADQEupvAR0Op2e3Nwo+bYzidECtldf4lpN11C5rFpm76SQKiEMNLkpE4MaOmKg0btCAU5rvIbKZVXtuySCBZ25tqyO31vQ2aQxu4Az7QR3hHb1/oXEoec9i8iuRGhdFwLo6HNHYM8R4PYMrzHpsFW9H0tEJd/f1RgVfK+bE32r7ysrzKqW9UzFci49B5i0vp1WWAftvKHnvN6NU08D+l7/S8ZnDZy6dJ33T6pvX8vOqt9+wWtP6n1epJw6coCmbgP72oi9jBlhT58Pc2aN0xIJ5obE0FkeRs5o3dGYxNCZsdyZZ6eGBHRhzwGSNXjNaZBDfWzXmrKHzhK1qa/Z00ZNR9p+jkDdnCXON3uknEis6Oet6P8p6wWm/VXr/7Sc63pr129ucoCrJLJGhnFGm68zIqfhRrqWHlsNeduzroaWOHGBep1YHX3kqfNGiXzFnVkOrbqvzWMSOG/Y0/ZRRmfFVmP3PLuUhO2CnW+cJDfUMkNNBvslBbfrNlShI+uwKEKAyVm7O2P4GjoV5VrG82Wz7YGzdExDrKN836pfugvZsGa87brOPpooQB3EJV9/bHVQrLNMum274TknmTQLrFmd/rqzrU53Jyt1bAmXFmQkT5MnGJP9HUXP2adXrae9xq/pCL1TcZReaBnbVjJoi7nVhF1A7CQ8ZooLDD1rvL1lCnMy9riGqbSbI6ApkQC6ZxFDz4HbRd0dMOsl4MxqoPTgZqSNWjR52tH3RroVPLA6PonvNcmLdeTbo//OFNO9b6S6y8GB3r/lbOsmcWQtF30nkd1yyvqqlh6Y8UlgmHN6du6ciPWcfXDeSeCqyT+V842wQYE6Z53eHed8zrlzf1JZfTP529T9OvruMr8NjApk4ukUfN3KekMridrVhok9y0U6otetKdj9zBUdgRuek7UDz9T/0HosKnBdD637m55dwEhH74nWwzjXmFXWoc4qW+b/36lEGXWfGn4S1nL4SRgCAAIAAgACAAIAAgACAAIAAkAb+FeAAQDbTIcpPl41KwAAAABJRU5ErkJggg=="
	},
	"icons": {
		"24": "ts-icon-small.png",
		"48": "ts-icon-medium.png",
		"128": "ts-icon-large.png"
	},
	"components": {
		"HelloWorldComponent": {
			"activation": "/",
			"integration": {
				"prepend": ".rightcol"
			},
			"capabilities": {},
			"code": {
				"css": "%2F*%20%0A%20*%20Rules%20must%20start%20with%20selector%20to%20match%20%0A%20*%20the%20component%3A%20.vendor.app.component%0A%20*%2F%0A.TradeshiftTutorials.HelloWorld.HelloWorldComponent%20%7B%0A%20%20%20%20display%3A%20block%3B%0A%7D",
				"js": "%2F**%0A%20*%20The%20lib%20object%20is%20configured%20with%20properties%20and%0A%20*%20methods%20according%20to%20the%20components%20%22capabilities%22.%0A%20*%20%40param%20%7Bobject%7D%20lib%0A%20*%2F%0Afunction%20Component%20(%20lib%20)%20%7B%0A%09%0A%09return%20%7B%0A%09%09%0A%09%09%2F**%0A%09%09%20*%20Invoked%20when%20element%20is%20first%20introduced%20(on%20DOMContentLoaded%20or%20by%20AJAX%20update)%0A%09%09%20*%20%40param%20%7Bobject%7D%20dom%20The%20ADsafe%20dom%20wrapper%0A%09%09%20*%2F%0A%09%09onload%20%3A%20function%20(%20dom%20)%20%7B%7D%2C%0A%09%09%0A%09%09%2F**%0A%09%09%20*%20Invoked%20before%20element%20is%20updated%20(AJAX%20update)%0A%09%09%20*%2F%0A%09%09onbeforeupdate%20%3A%20function%20()%20%7B%7D%2C%0A%09%09%0A%09%09%2F**%0A%09%09%20*%20Invoked%20after%20element%20is%20updated%20(AJAX%20update)%0A%09%09%20*%20%40param%20%7Bobject%7D%20dom%20The%20ADsafe%20dom%20wrapper.%0A%09%09%20*%2F%0A%09%09onafterupdate%20%3A%20function%20(%20dom%20)%20%7B%7D%2C%0A%09%09%0A%09%09%2F**%0A%09%09%20*%20Invoked%20on%20window.unload%0A%09%09%20*%2F%0A%09%09onunload%20%3A%20function%20()%20%7B%7D%2C%0A%09%09%0A%09%09%2F**%0A%09%09%20*%20Invoked%20whenever%20new%20data%20is%20found%20in%20the%20public%20RDF%20datasource.%0A%09%09%20*%20%40param%20%7Bboolean%7D%20isIndexed%20True%20when%20data%20was%20indexed%20by%20RDFa%20in%20the%20page%20DOM.%0A%09%09%20*%2F%0A%09%09ondata%20%3A%20function%20(%20isIndexed%20)%20%7B%7D%0A%09%7D%3B%0A%7D",
				"xhtml": "%3Chtml%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%09%3Chead%3E%0A%09%09%3Ctitle%3EHello%20World%3C%2Ftitle%3E%0A%09%3C%2Fhead%3E%0A%09%3Cbody%3E%0A%09%09%3C!--%20use%20ADsafe%20markup%20--%3E%0A%09%09%3Cdiv%20class%3D%22grey%20border%20box%20r_all%22%3E%0A%09%09%09%3Ch2%3E%0A%09%09%09%09%3Cimg%20src%3D%22%24%7Bimages.ts-icon-small.png%7D%22%2F%3E%0A%09%09%09%09%3Cspan%3E%24%7Blocales.app_name%7D%3C%2Fspan%3E%0A%09%09%09%3C%2Fh2%3E%0A%09%09%09%3Cp%3E%24%7Blocales.hello_world%7D%3C%2Fp%3E%0A%09%09%3C%2Fdiv%3E%0A%09%3C%2Fbody%3E%0A%3C%2Fhtml%3E"
			}
		}
	}
}

This is what a Tradeshift app looks like packaged into a neat json file. You still don't need to worry about what you see here; just copy and paste the contents into the text area and click Activate.

Activate your app to see it in action

Now that your app has been activated, navigate to https://sandbox.tradeshift.com, and you'll see that a new box has been added to the top of the right column; easy as telling the Stormtroopers that these are not the droids they are looking for.

Learn and play!

I think if you've come this far, you are probably interested in fiddling with the code, so let's do that! By the end of this step, you will have created an alert dialog on every page your component is on, but first I have to tell you a bit about the structure of an app. As you can see in the editor, it consists of images (pretty straightforward) and components (yes, an app can have multiple components, but let's not worry about that now). Components include css, js and some xhtml.

In the css part, there is only one restriction: rules must start with selector to match the component, .vendor.app.component, in our case .TradeshiftTutorials.HelloWorld.HelloWorldComponent (it's a mouthful, but we can't risk apps modifying our basic set of css rules and crippling the Tradeshift experience for the users).

The xhtml part is totally what you expect it to be, valid xhtml markup with head and body, your content has to go below the line:

<!-- use ADsafe markup -->

Before we go on to the js part, I have to tell you about ADsafe. If you have used it before, it will be easier for you, but we have changed some parts of it to better serve the purpose of the app framework. ADsafe is basically a way for us to control what is going on in your code, essentially limiting access to some JavaScript features. You can read more about this at www.adsafe.org. Don't worry if you are the type of coder who starts writing code before reading every line of documentation - the editor has built in code-checking, so anything that is not valid ADsafe JavaScript will be highlighted!

One more addition to this - although ADsafe restricts access to several JavaScript features, you can still access some of them through namespaces, which are detailed in the Tradeshift App Library Reference Guide.

Now, let's take a look at the js part of the HelloWorldComponent. The layout of a component is pretty straightforward:

/**
 * The lib object is configured with properties and
 * methods according to the components "capabilities".
 * @param {object} lib
 */
function Component ( lib ) {

	return {

		/**
		 * Invoked when element is first introduced (on DOMContentLoaded or by AJAX update)
		 * @param {object} dom The ADsafe dom wrapper
		 */
		onload : function ( dom ) {},

		/**
		 * Invoked before element is updated (AJAX update)
		 */
		onbeforeupdate : function () {},

		/**
		 * Invoked after element is updated (AJAX update)
		 * @param {object} dom The ADsafe dom wrapper.
		 */
		onafterupdate : function ( dom ) {},

		/**
		 * Invoked on window.unload
		 */
		onunload : function () {}
	};
}

The ts.lib object is going to be your best friend while developing apps; with it you gain access to features restricted by ADsafe. Let's try it out right now, click on HelloWorldComponent and edit the capabilities line to look like this:

"capabilities": {
	"system": {
		"alert": true
	}
},

This means that you want to use the system namespace, more specifically the alert function from the said namespace. Let's switch back to the js view and edit the onload event handler to display an alert every time the app is loaded (this is not very user-friendly, but perfect to get started!).

onload : function ( dom ) {
	lib.ts.system.alert("onload has been called");
}

Every time you add a new capability, you have to access it through lib.ts.namespace.method. To view our current collection of available namespaces, go to the Tradeshift App Library Reference Guide. Now click Activate, visit http://go.tradeshift.com and watch as your alert appears!

The possibilities

Now that you have tried out the basics of the App Library, let your imagination run wild! With Tradeshift Apps you can read RDFa data from all pages inside Tradeshift, use IFrames to integrate your own webapps, access remote webservices using AJAX and OAuth 1.0, access the Tradeshift REST API, store in-app settings persistently on our servers and communicate with other apps!

That's it!

Your first app is up and running and you know about the features of the library, so you can try some other stuff now, like changing the locale strings, modifying the xhtml, replacing icons or learn more about the API by looking at our Tradeshift App Library Reference Guide, or just experimenting with the other sample apps we made for you.