# Getting Started

This article will illustrate the use of the SanteDB dCDR SDK to write a portable SanteDB dCDR applet. 

## Obtain & Install the Software Development Kit 

You should follow the [Installing the dCDR SDK](/installation/installation-1/deployment/installing-software/disconnected-gateway/installing-the-dcdr-sdk.md) before completing this exercise.

## Obtain the Starter Code

Next, you'll need to clone or create an applet. You can clone the starter applet from <https://github.com/santedb/applet-starter> in any directory of your choice.

![](/files/-MSZ6po8N8eysz3MONxz)

## Configure a SanteDB iCDR in Debug Mode

You can configure a SanteDB iCDR (such as the vanilla iCDR or the SanteMPI) to load your applet definitions from the file system. To do so, navigate to `Development > Developer Options`and enable the debug repository, set the solution file to one of the following:

* For Administrative Panel Development: `C:\Program Files\Sante Suite\SDK\santedb.admin.sln`
* For Generic Development: `C:\Program Files\Sante Suite\SDK\santedb.core.sln`&#x20;
* For EMR Development: `C:\Program Files\Sante Suite\SDK\santedb.emr.sln`

<figure><img src="/files/SMZq0uH4AYqYEr8jVerc" alt=""><figcaption></figcaption></figure>

Then set the `Applets To Debug`to the path where you cloned the starter code

## Hello World!

If you re-run the command `sdb-ade --ref=santedb.admin.sln.pak --applet=path-to-applet-starter` you'll notice that upon login you see the administrative panel. This is because the --ref= is instructing the SDK that your module is extending the admin panel.

To debug just the applet-starter applet you can instead reference just the core plugins:

```
sdb-ade --ref=santedb.core.sln.pak --applet=path-to-applet-starter
```

The browser will launch with the basic login.html contents, which you can login with demoadmin/@Elbonia123.

{% hint style="info" %}
The login screen is shown because the index.html view demands login permission to be rendered. By default the dCDR interface will display the default AngularJS route of /
{% endhint %}

After logging in, you should see the welcome message:

![](/files/-MSZEl-m6LpD3QjiKHDY)

### Code Editing

You can now edit the files in your favorite HTML/JavaScript editor. After editing a file you simply need to press the refresh button on the browser window. We can also update the code to query some patients from the database, if we modify the contents of index.html:

```markup
<div>
    <form name="searchForm" ng-submit="doSearch(searchForm)" method="dialog">
        Search For: <input 
            required="required" minlength="3" maxlength="30" 
            type="text" ng-model="searchTerm" />
        <button type="submit">{{ 'ui.action.search' | i18n }}</button>
    </form>
    <table border="1">
        <tr ng-repeat="result in results.resource">
            <td>{{ result.name | name }}</td>
        </tr>
    </table>
</div>
```

This code:

* Creates a new form which calls the doSearch function in the controller
* Allows the user to enter a text search term
* Renders the results in the bundle

{% hint style="info" %}
All HTML in SanteDB must be well-formed XHTML placed in the <http://www.w3.org/1999/xhtml> namespace.
{% endhint %}

We can then edit the index.js controller file to actually perform our search:

```javascript
$scope.doSearch = doSearch;

// Perform a search 
async function doSearch(searchForm) {
    if(searchForm.$invalid) {
        alert("Invalid Input!");
        return;
    }

    try {
        $scope.results = await SanteDB.resources.patient.findAsync({ "name.component.value" : `~${$scope.searchTerm}` });
    } catch (e) {
        $rootScope.errorHandler(e);
    }
}
```

This code:

* Validates that the form has no issues
* Calls the SanteDB API to find all patients (SanteDB.resources.patient.findAsync) who has any name (name.component.value) is approximately the output (the \~ indicator)
* Assigns the results of the call to the scoped results variable

![](/files/-MSZKP2iS__Kzx2h8hch)

### Next Steps

For an example of a more complex applet which extends the underlying administrative panel, you can clone the elb-mpi project and launch the debugger with that codebase:

```javascript
sdb-ade --ref=santedb.admin.sln.pak --applet=path-to-elb-mpi
```

When launching this you should be presented with the Elbonia customizations of the MPI administrative panel.

![](/files/-MSZKfgPTTDdoSRx1WPb)

### Useful Hints

* You can reset your debugging environment with the `sdb-ade --reset` option
* You can setup different servers/environments by adding the --name= option, for example, you can setup a PROD and STAGE debugging environment by using `sdb-ade --ref=XXX --name=PROD` and `sdb-ade --ref=YYY --name=STAGE`
* You can change the configuration of your debugging environment and/or see offline files in the following directory:
  * %localappdata%\log => Logs from the debugging environment
  * %localappdata%\SDBADE => Data files (databases, preferences, etc.)
  * %appdata%\SDBADE => Configuration files

## Related Topics

{% content-ref url="/pages/-LZBO0UWfmNL-1gx9p5J" %}
[Applets](/developers/applets.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.santesuite.org/developers/getting-started.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.