Skip to main content

RamBase Guidelines

Create your first component

Note

If you are an internal developer, you should instead follow the guide in Confluence titled "Homer setup environment"

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 a 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 version), 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 application in app editor, 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

Note

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"

Note

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

Note

If you don't want to create your component from scratch, 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:

    1. The config.ts file should now contain an url to the Rambase API resource: sales/orders/{salesOrderId}

    2. 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

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:

    1. The config.ts file should now contain an url to the RamBase API resource: sales/orders

    2. The html file should contain an rb-grid element containing the columns you picked in the template builder

    3. The viewModel.ts file should contain a vm.dataSource binding

  5. Save the component and see the changes reflected in the browser

In this section: