Getting Started

Search…
Getting Started
This article will illustrate the use of the SanteDB dCDR SDK to write a portable SanteDB dCDR applet. 
You should follow the Installing the dCDR SDK 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.
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.
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 /
After logging in, you should see the welcome message:
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:
<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
All HTML in SanteDB must be well-formed XHTML placed in the http://www.w3.org/1999/xhtml namespace.
We can then edit the index.js controller file to actually perform our search:
$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
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:
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.
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
Applets
​
Developers - Previous
Extending SanteSuite
Next - Developers
Applets
Last modified 6mo ago
Copy link
On this page
Obtain the Starter Code
Hello World!
Code Editing
Next Steps
Useful Hints