Create your first Component

Create component

---

1. Create a folder where you want your Rambase components to live. Ex: c:\rambaseComponents
2. Open this folder in the command prompt
3. Type rb app myComponentName
   This command will create an Rambase component with the name *myComponentName*. It will also create a folder named *myComponentName* and generate the necessary template files.
4. The component is now created in ST1 (edit verison), meaning it can be included in a Rambase application.
5. Open the newly created component in VS Code.
6. Make sure the Homer synchronizer service is running by executing the command rb serve in either the c:\rambaseComponents folder or the current component folder
7. As described under setup environment a browser window should now open, where you need to log in with your Rambase credentials.
8. Save one of the files via the File menu or by pressing ctrl + s, to test that the synchronizer tool is listening for file changes. A synced ok message should appear.
9. If you have followed the steps under Create your first Rambase application you can include your newly created component in this application
Open your applicaton in appeditor, click add component to add your new component and navigate to it via the programline by typing the name of the application.
10. You are now ready to start coding

You are now ready to create a component from a template, but if you want to create a simple Hello World component first:

1. Open the html file under the Views-folder and type "Hello world"
2. After browser refresh your application should now display "Hello world"

You can also try to bind input fields to your viewmodel:

1. Open the html file under the Views-folder and type: <input type="text" ng-model="vm.test" />
2. Open the ts file under the ViewModels folder and type: vm.test = "Hello world";
3. After browser refresh, your application should now display "Hello world"

Using the Rambase APIs and rb template

---

If you don't want to create your component from scrach, you can use one of our template components.

Form template

1. From the command prompt, execute the command: rb template
   This will open a browser window, where you can search in the Rambase APIs and pick API fields to use in your component.
2. Select template type: form
3. Start typing sales/orders in the API search
   Select sales/orders/{salesOrderId}
4. Pick some of the API fields and click Generate template
5. Two things should now have happened in your component:
   
   • The config.ts file should now contain an url to the Rambase API resource: sales/orders/{salesOrderId}
     
   • The html file should contain rb-input elements for the API fields you picked
6. Change the {salesOrderId} parameter value to be a valid salesOrderId, eg: 107117
7. Save the component and see the changes reflected in the browser

Note that the dataSource has the property autobind set to true.
This will automatically execute a GET request on the specifyed API resource when the application is loaded. Autobind will also automatically execute a PUT request when input values are changed.

Grid template

1. In the template builder select template type: form
2. Start typing sales/orders in the API search
   Select sales/orders
3. Pick some of the API fields and click Generate template
4. Three things should now have happened in your component:
   
   • The config.ts file should now contain an url to the Rambase API resource: sales/orders
     
   • The html file should contain an rb-grid element containing the columns you picked in the template builder
   • The viewModel.ts file should contain a vm.dataSource binding
5. Save the component and see the changes reflected in the browser