> For the complete documentation index, see [llms.txt](https://docs.prebilt.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.prebilt.com/prebilt-for-im-wm-strm/enhancing-prebilt/creating-a-custom-app-from-scratch.md).

# Creating a custom app from scratch

This section will provide a step-by-step guide on how to create a custom app from scratch (with PreBilt naming conventions this will be a ‘ztctm\_wm\_app\_XXX’).

## Creating a custom app

If you want to create a ‘standard’ PreBilt app from scratch the process is the same but the naming convention is <kbd>tctm\_wm\_app\_XXX</kbd>

To create a new app, there is a template created which contains all the necessary files to get an app working.&#x20;

1. Download the starter template and unzip it to the apps folder, under a folder called ‘ztctm\_wm\_app\_XXX’ where XXX is the app catalogue number. It is important that you download and unzip this rather than clone the repository because you don’t want to overwrite the template, but create a new repository for a new app.&#x20;
2. Alternatively, within your repository you can copy a current app and make amendments to it. Our recommendation would be to copy a simpler app which would need less editing but has all the boilerplate code you will need. If you decide to copy the app, make sure to copy the entire folder <kbd>tctm\_wm\_app\_XXX</kbd> which includes the controller, view, CSS files, and extensions.
3. &#x20;Edit all the file names in the folder from XXX to the app catalogue number (controller, view, CSS and both extension files).
4. &#x20;Search and replace XXX in the app files (controller and view) with the app catalogue number.&#x20;
5. Update the app description and version into the <kbd>attachInit</kbd> function in the App\_XXX.controller.js file. e.g., &#x20;

```
// Register app version
sap.tctm.core.registerApp({
appID: appApplID,
appDesc: "Stock Movements",
version: "1"
}); 
```

6. From here you can now add the functionality for the app, oPage1000 has been created as a standard selection screen with the standard actions and <kbd>GET\_SETUP</kbd> and <kbd>SELECT AJAX</kbd> calls have been added. The success of the <kbd>SELECT AJAX</kbd> call now requires custom code to be added to tell the app what to do on return from this call to SAP. &#x20;
7. More pages and more functionality can be added by adding code to the view and controller files or by amending the current pages. Styling can be added in the CSS file. More information on the global functions can be found in the ‘Methods’ section below.&#x20;
8. In AMD update the FE\_APP mapping to reference our frontend app - <kbd>tctm.tctm\_wm\_app\_XXX.view\.App\_XXX</kbd>
9. In the backend we need to create a corresponding service class, this can be done with the Object Navigator (transaction *SE80*). You may want an overarching package to store custom classes, typically we use the notation ‘ZTCTM’. Within your package create a subpackage referencing the app <kbd>ZTCTM\_WM\_APP\_XXX</kbd>. That should prompt you to create a new transport.
10. Within your subpackage create the class <kbd>ZTCTM\_WM\_APP\_XXX</kbd>.
11. If you want to inherit from a Superclass (e.g., a core PreBilt app) then clicking Properties -> Superclass will allow you to do so. If you then want to amend any methods, go into change mode and then either right click -> Redefine or click on the method itself and use the redefine button.
12. If you want to create the class from scratch then you will need to:
    1. Add the following to the interface tab and activate <kbd>/TCTM/IF\_WM\_APP\_SRV</kbd>.
    2. Update types and attributes in the class. Goto -> Sections -> Public section.
    3. Copy over <kbd>/TCTM/IF\_WM\_APP\_SRV\~HANDLE\_REQUEST</kbd> and <kbd>GET\_SETUP</kbd>.&#x20;
13. Add any Macros you may want to use, within your class on the toolbar click Goto -> Local Definitions/Implementations -> Macros. Some common ones are:

add\_data: allows us to add data to our lt\_data table

```
DEFINE add_data.
  append initial line to lt_data assigning <ls_data>.
  <ls_data>-name = &1.
  get reference of &2 into <ls_data>-data.
END-OF-DEFINITION.
```

add\_parameter: allows us to add information to a parameter table lt\_ptab which we can use when calling a service class.

```
DEFINE add_parameter.
  clear: ls_ptab.
  ls_ptab-name = &1.
  ls_ptab-kind = &2.
  get reference of &3 into ls_ptab-value.
  insert ls_ptab into table lt_ptab.
END-OF-DEFINITION.
```

add\_range: allows us to define a range to search by or use in selections.

```
DEFINE add_range.
  append initial line to &1 assigning <ls_range>.
  assign component 'SIGN' of structure <ls_range> to <lv_range_f>.
  if sy-subrc = 0.
    <lv_range_f> = &2.
  endif.
  assign component 'OPTION' of structure <ls_range> to <lv_range_f>.
  if sy-subrc = 0.
    <lv_range_f> = 'EQ'.
    if not &3 is initial and not &4 is initial.
      <lv_range_f> = 'BT'.
    elseif &3 cs '*'.
      <lv_range_f> = 'CP'.
    endif.
  endif.
  assign component 'LOW' of structure <ls_range> to <lv_range_f>.
  if sy-subrc = 0.
    <lv_range_f> = &3.
  endif.
  assign component 'HIGH' of structure <ls_range> to <lv_range_f>.
  if sy-subrc = 0.
    <lv_range_f> = &4.
  endif.
END-OF-DEFINITION.
```

14\.  The custom backend service class will then need to be assigned to the app’s transaction code in config. (For more information see [Integration with AMD and CFG](/prebilt-for-im-wm-strm/enhancing-prebilt/integration-with-amd-and-cfg.md#toc214462478).).

15. Any method’s created in the backend will need to have an AJAX call in the frontend created (see [Connection to SAP](/prebilt-for-im-wm-strm/enhancing-prebilt/connection-to-sap.md#connection-to-sap) for more information).