### Start Legacy Grunt Setup

Source: https://github.com/ui5/openui5/blob/master/docs/developing.md

Use this command to start the legacy Grunt-based development server. This setup is being phased out in favor of the standard setup.

```bash
npm run start-grunt
```

--------------------------------

### Static Table Initialization Example

Source: https://github.com/ui5/openui5/blob/master/src/sap.m/test/sap/m/TableContexualWidth.html

Demonstrates the basic setup of a sap.m.Table with a 'popinLayout' and column definitions. This example is presented as a static use case, potentially for comparison or simpler scenarios.

```javascript
var table1 = new sap.m.Table({
 popinLayout: "GridSmall",
 headerText : "Team Members",
 columns : [
  new sap.m.Column({ width : "2rem", hAlign : "Center", mergeFunctionName : "getSrc" }),
  new sap.m.Column({ header : new sap.m.Label({ text : "First Name" }) }),
  new sap.m.Column({ header : new sap.m.Label({ text : "Last Name" }), demandPopin: true }),
  new sap.m.Column({ hAlign : "Right", minScreenWidth : "Phone", demandPopin : true, popinDisplay : "Inline", header : new sap.m.Label({ text : "Birth Date" }) }),
  new sap.m.Column({ hAlign : "Right", width : "4rem", demandPopin : true, minScreenWidth : "Tablet", popinDisplay : "Inline", header : new sap.m.Label({ text : "Gender" }) })
 ]
});
```

--------------------------------

### Basic UI5 Application Setup with Calendar

Source: https://github.com/ui5/openui5/blob/master/src/sap.ui.unified/test/sap/ui/unified/CalendarMultipleMonths.html

Sets up a basic OpenUI5 application structure with an App and Page control, and includes buttons to trigger different calendar configurations. This serves as the main entry point for the calendar examples.

```javascript
sap.ui.getCore().attachInit(function() {
  sap.ui.require([
    "sap/ui/core/Core",
    "sap/ui/unified/library",
    "sap/m/App",
    "sap/m/Page",
    "sap/ui/unified/Calendar",
    "sap/ui/unified/DateRange",
    "sap/ui/unified/DateTypeRange",
    "sap/m/Button",
    "sap/ui/core/date/UI5Date"
  ], function(Core, unifiedLibrary, App, Page, Calendar, DateRange, DateTypeRange, Button, UI5Date) {
    "use strict";
    var CalendarDayType = unifiedLibrary.CalendarDayType,
      oCalendar1;

    var oButton6 = new Button("B6", {
      text: "4 Months",
      press: function() {
        Core.getConfiguration().setLanguage("en-US");
        oCalendar1 && oCalendar1.destroy();
        oCalendar1 = fnCalendarFactory();
        oCalendar1.setIntervalSelection(false);
        oCalendar1.setSingleSelection(true);
        oCalendar1.setWidth("100%");
        oCalendar1.setMonths(4);
        oPage.insertContent(oCalendar1, 0);
        Core.applyChanges();
        oCalendar1.focusDate(UI5Date.getInstance(2015, 0, 31));
      }
    });

    var oButton70 = new Button("B70", {
      text: "Chinese calendar",
      press: function() {
        Core.getConfiguration().setLanguage("zh-CN");
        oCalendar1 && oCalendar1.destroy();
        oCalendar1 = fnCalendarFactory();
        oCalendar1.setLocale("zh_CN");
        oCalendar1.destroySelectedDates();
        oPage.insertContent(oCalendar1, 0);
        Core.applyChanges();
        oCalendar1.focusDate(UI5Date.getInstance(2015, 0, 2));
      }
    });

    var oButton7 = new Button("B7", {
      text: "2 Months Chinese calendar",
      press: function() {
        Core.getConfiguration().setLanguage("zh-CN");
        oCalendar1 && oCalendar1.destroy();
        oCalendar1 = fnCalendarFactory();
        oCalendar1.setLocale("zh_CN");
        oCalendar1.destroySelectedDates();
        oCalendar1.setMonths(2);
        oPage.insertContent(oCalendar1, 0);
        Core.applyChanges();
        oCalendar1.focusDate(UI5Date.getInstance(2015, 0, 2));
      }
    });

    var oButton8 = new Button("B8", {
      text: "2 Months Gregorian calendar",
      press: function() {
        Core.getConfiguration().setLanguage("en-US");
        oCalendar1 && oCalendar1.destroy();
        oCalendar1 = fnCalendarFactory();
        oCalendar1.destroySelectedDates();
        oCalendar1.setMonths(2);
        oCalendar1.setMaxDate(UI5Date.getInstance(2015, 7, 24));
        oPage.insertContent(oCalendar1, 0);
        Core.applyChanges();
        oCalendar1.focusDate(UI5Date.getInstance(2015, 0, 2));
      }
    });

    var oApp = new App("myApp").placeAt("body");
    var oPage = new Page({
      title: "Calendar",
      content: [
        oButton6,
        oButton70,
        oButton7,
        oButton8
      ]
    });

    function fnCalendarFactory() {
      return new Calendar("Cal1", {
        selectedDates: [new DateRange("DR1",{startDate: UI5Date.getInstance(2015, 0, 2)})
        ],
        specialDates: [
          new DateTypeRange("SDR01",{startDate: UI5Date.getInstance(2015, 1, 2), type: CalendarDayType.Type01}),
          new DateTypeRange("SDR02",{startDate: UI5Date.getInstance(2015, 1, 3), type: CalendarDayType.Type02}),
          new DateTypeRange("SDR03",{startDate: UI5Date.getInstance(2015, 1, 4), type: CalendarDayType.Type03}),
          new DateTypeRange("SDR04",{startDate: UI5Date.getInstance(2015, 1, 5), type: CalendarDayType.Type04}),
          new DateTypeRange("SDR05",{startDate: UI5Date.getInstance(2015, 1, 6), type: CalendarDayType.Type05}),
          new DateTypeRange("SDR06",{startDate: UI5Date.getInstance(2015, 1, 7), type: CalendarDayType.Type06}),
          new DateTypeRange("SDR07",{startDate: UI5Date.getInstance(2015, 1, 8), type: CalendarDayType.Type07}),
          new DateTypeRange("SDR08",{startDate: UI5Date.getInstance(2015, 1, 9), type: CalendarDayType.Type08}),
          new DateTypeRange("SDR09",{startDate: UI5Date.getInstance(2015, 1, 10), type: CalendarDayType.Type09}),
          new DateTypeRange("SDR10",{startDate: UI5Date.getInstance(2015, 1, 11), type: CalendarDayType.Type10}),
          new DateTypeRange("SDR11",{startDate: UI5Date.getInstance(2015, 1, 12), type: CalendarDayType.Type10, color:"#ffffff"}),
          new DateTypeRange("SDR12",{startDate: UI5Date.getInstance(2015, 1, 13), type: CalendarDayType.Type10, color:"#ffff66"}),
          new DateTypeRange("SDR13",{startDate: UI5Date.getInstance(2015, 1, 14), endDate: UI5Date.getInstance(2015, 1, 16), type: CalendarDayType.Type10})
        ]
      });
    }
    oApp.addPage(oPage);
  });
});
```

--------------------------------

### Start UI5 Server and Open TestSuite

Source: https://github.com/ui5/openui5/blob/master/docs/developing_legacy_tooling.md

Navigate to the TestSuite project directory and start the UI5 server to open the TestSuite in your browser.

```sh
cd src/testsuite
ui5 serve --open index.html
```

--------------------------------

### Start OpenUI5 Development Server

Source: https://github.com/ui5/openui5/blob/master/docs/developing.md

This command starts the development server for the OpenUI5 project. The TestSuite will be available at http://localhost:8080/test-resources/testsuite/testframe.html.

```sh
npm start
```

--------------------------------

### Install npm Dependencies

Source: https://github.com/ui5/openui5/blob/master/docs/developing.md

After cloning the repository, navigate into the project directory and install all necessary npm dependencies.

```sh
cd openui5
npm install
```

--------------------------------

### Start UI5 Development Server

Source: https://github.com/ui5/openui5/blob/master/src/sap.m/test/sap/m/demokit/sample/IllustratedMessageInAppCustom/README.md

Starts the development server for the UI5 application. Access the application at http://localhost:8080.

```bash
npm run start
```

--------------------------------

### Load and Start Customized Application

Source: https://github.com/ui5/openui5/blob/master/src/sap.ui.core/test/sap/ui/core/ComponentExtensibility_legacyAPIs.html

Loads and starts a customized application component. Ensure the component name is correctly specified.

```javascript
sap.ui.localResources("samples"); // handles both, SAP and customer content, in this example // load and start the customized application var oComp = sap.ui.component({
  name: "samples.components.ext_legacyAPIs.customer"
});
var oCompCont = new sap.ui.core.ComponentContainer({
  component: oComp
});
oCompCont.placeAt("content");
```

--------------------------------

### Instantiate sap.m.List

Source: https://github.com/ui5/openui5/blob/master/src/sap.ui.core/test/sap/ui/core/InvisibleControls.html

Example of creating a List with StandardListItem controls.

```javascript
new sap.m.List({
  items: [new sap.m.StandardListItem({title: "A"}), new sap.m.StandardListItem({title: "B"})]
})
```

--------------------------------

### Start UI5 Development Server

Source: https://github.com/ui5/openui5/blob/master/docs/developing_legacy_grunt.md

Start the Grunt-based development server for UI5. This command enables the build-free development process.

```bash
grunt serve
```

--------------------------------

### Instantiate sap.ui.ux3.ExactBrowser

Source: https://github.com/ui5/openui5/blob/master/src/sap.ui.core/test/sap/ui/core/InvisibleControls.html

Example of creating an ExactBrowser with ExactAttribute items.

```javascript
new sap.ui.ux3.ExactBrowser({
  attributes: [new sap.ui.ux3.ExactAttribute({text: "A"}), new sap.ui.ux3.ExactAttribute({text: "B"})]
})
```

--------------------------------

### Initialize Application and Page

Source: https://github.com/ui5/openui5/blob/master/src/sap.m/test/sap/m/TimePickerVisualPart2.html

Sets up the main application and the initial page, including models and content.

```javascript
var UI5Date = sap.ui.require("sap/ui/core/date/UI5Date");
var app = new sap.m.App("myApp", { initialPage:"page1" });
app.placeAt("body");
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({ timeValue: UI5Date.getInstance() });
app.setModel(oModel);
var page = new sap.m.Page("page1", {
  title: "TimePicker",
  content: [
    new sap.m.HBox({
      alignItems: sap.m.FlexAlignItems.Center,
      items: [
        new sap.m.Text({ text: "MaskInput is:" }),
        // Mask mode switch
        new sap.m.Text({ text: "Mobile simulation is:" }),
        // Mobile simulation switch
      ]
    }),
    generateTimePickers(),
    new sap.ui.core.HTML({ id: "eventsDiv", content: "<div style='float:right;'>Some Events:</div>" })
  ]
});
app.addPage(page);
```

--------------------------------

### Get Start Date of a Date Range

Source: https://github.com/ui5/openui5/blob/master/src/sap.ui.integration/test/sap/ui/integration/demokit/cardExplorer/webapp/topics/learn/features/dateRanges.html

Use `dateRange.start` to get the start date of a specified range. The `type` parameter is mandatory, and `value` is optional for some types.

```javascript
{= dateRange.start("lastYears", 5)}
```

--------------------------------

### Serve OpenUI5 SDK (Demo Kit)

Source: https://github.com/ui5/openui5/blob/master/docs/developing.md

Start a local HTTP server for the built SDK located in the `src/testsuite/dist` directory.

```sh
npm run serve-sdk
```

--------------------------------

### Application Setup and Rendering

Source: https://github.com/ui5/openui5/blob/master/src/sap.m/test/sap/m/SelectionDetails.html

Sets up the main application with a page containing the SelectionDetails control and buttons for adding/removing items. Applies theme-specific styling if needed.

```javascript
var oApp = new sap.m.App({
  pages: new sap.m.Page({
    title: "Selection Details",
    content: [
      new sap.m.HBox({
        items: [
          oSelectionDetails,
          new sap.m.Button({
            text: "Add Item",
            icon: "sap-icon://add",
            press: function() {
              oSelectionDetails.addItem(new sap.m.SelectionDetailsItem({
                lines: {
                  path: "/lines/0",
                  factory: fnCreateLine
                },
                actions: [
                  new sap.ui.core.Item({ key: "1", text: "item action 1" })
                ],
                enableNav: true
              }));
            }
          }),
          new sap.m.Button({
            text: "Remove Item",
            icon: "sap-icon://delete",
            press: function() {
              var aItems = oSelectionDetails.getItems();
              if (aItems.length > 0) {
                aItems.pop().destroy();
              }
            }
          })
        ]
      })
    ]
  }),
  models: oModel
});
oApp.placeAt("content");
//set the contrast class for belize plus
if (sap.ui.getCore().getConfiguration().getTheme() === "sap_belize_plus") {
  oApp.addStyleClass("sapContrastPlus");
}
```

--------------------------------

### Get Start Date for 'yesterday'

Source: https://github.com/ui5/openui5/blob/master/src/sap.ui.integration/test/sap/ui/integration/demokit/cardExplorer/webapp/topics/learn/features/dateRanges.html

Retrieves the start of yesterday's date using `dateRange.start('yesterday')`. No additional value parameter is needed for this type.

```javascript
{= dateRange.start('yesterday')}
```

--------------------------------

### ResponsiveFlowLayout Simple Example

Source: https://github.com/ui5/openui5/blob/master/src/sap.ui.layout/test/sap/ui/layout/ResponsiveFlowLayout.html

Illustrates a ResponsiveFlowLayout where one button is twice the size of another. No specific setup or imports are shown, focus is on layout behavior.

```XML
<ResponsiveFlowLayout id="rlf1">
  <FlowLayoutCell id="flc1" width="100px" height="100px" />
  <FlowLayoutCell id="flc2" width="200px" height="100px" />
</ResponsiveFlowLayout>
```

--------------------------------

### Build and Serve OpenUI5 SDK (Demo Kit)

Source: https://github.com/ui5/openui5/blob/master/docs/developing.md

A shortcut command to both build and serve the OpenUI5 SDK.

```sh
npm run sdk
```

--------------------------------

### Add Column with sap.m.Select and Items

Source: https://github.com/ui5/openui5/blob/master/src/sap.ui.table/test/sap/ui/table/Table.html

Defines a column using sap.m.Select with predefined items. This snippet is incomplete, showing only the setup of the Select control and the start of the Column definition.

```javascript
// sap.m.Select
oControl = new sap.m.Select({
  items: [
    new sap.ui.core.Item({key: "v1", text: "Value 1"}),
    new sap.ui.core.Item({key: "v2", text: "Value 2"}),
    new sap.ui.core.Item({key: "v3", text: "Value 3"}),
    new sap.ui.core.Item({key: "v4", text: "Value 4"})
  ]
});
oColumn = new sap.ui.table.Column({label: new sap.m.Label({text: "m.Select"}), template: oControl, width: "150px"});
oColumn.setCreationTemplate((new sap.m.Sel
```

--------------------------------

### Initialize Card with Host Actions

Source: https://github.com/ui5/openui5/blob/master/src/sap.ui.integration/test/sap/ui/integration/demokit/cardExplorer/webapp/topics/integrate/hostActions.html

This example demonstrates how to initialize a UI5 card with custom and navigation host actions. It requires importing necessary modules like FlexBox, Card, Host, and MessageToast.

```javascript
function init() { 
    sap.ui.require([
        "sap/m/FlexBox", 
        "sap/ui/integration/widgets/Card", 
        "sap/ui/integration/Host", 
        "sap/m/MessageToast"
    ], function (FlexBox, Card, Host, MessageToast) {
        const oHost = new Host({
            actions: [
                {
                    type: 'Navigation',
                    icon: 'sap-icon://world',
                    text: 'Open SAP website',
                    tooltip: 'Open www.sap.com',
                    url: 'https://www.sap.com',
                    target: '_blank'
                },
                {
                    type: 'Custom',
                    icon: 'sap-icon://add',
                    text: 'Add to mobile',
                    tooltip: 'Add card to your mobile',
                    action: function (oCard, oButton) {
                        MessageToast.show("Added to mobile: " + oCard.getManifestEntry("/sap.app/title"));
                    }
                }
            ]
        });
        const oCard = new Card({
            id: "quickLinksCardExample",
            manifest: "./manifests/quickLinksCard.manifest.json",
            width: "352px",
            host: oHost
        }).addStyleClass("sapUiSmallMargin");
        const oFlexBoxCardExample = new FlexBox({
            direction: "Row",
            wrap: "Wrap",
            justifyContent: "Start",
            alignItems: "Stretch",
            width: "100%",
            items: [oCard]
        });
        oFlexBoxCardExample.placeAt("cardContainer");
    });
};
```

--------------------------------

### Populate Menu with Items (Menu Eventing)

Source: https://github.com/ui5/openui5/blob/master/src/sap.ui.commons/test/sap/ui/commons/Menu.html

Populates several menus with items, similar to the item eventing example, but configured for menu-level event handling. This setup is for menu-level event handling.

```javascript
//Menus with menu eventing
var oMenu1a = createMenu(5);
var oMenu2a = createMenu(6);
var oMenu3a = createMenu(7);
var oMenu4a = createMenu(8);
createAndAddMenuItem(oMenu1a, 51, "This is an item with a very long text", "images/icon.gif");
createAndAddMenuItem(oMenu1a, 52, "This is another item with an even longer text", "images/save-icon.png");
createAndAddMenuItem(oMenu1a, 53, "E-Test Item1-3").setEnabled(false);
createAndAddMenuItem(oMenu1a, 54, "P-Test Item1-4").setSubmenu(oMenu2a);
var item5 = createAndAddMenuItem(oMenu1a, 55, "Item5");
item5.setEnabled(false);
item5.setSubmenu(oMenu4a);
createAndAddMenuItem(oMenu2a, 61, "Item2-1", "icon.gif").setEnabled(false);
createAndAddMenuItem(oMenu2a, 62, "Item2-2", null);
createAndAddMenuItem(oMenu2a, 63, "Item2-3", null);
createAndAddMenuItem(oMenu2a, 64, "Item2-4", null).setSubmenu(oMenu3a);
createAndAddMenuItem(oMenu3a, 71, "Item3-1", null);
oMenu1a.attachItemSelect(function(oEvent){
 var oItem = oEvent.getParameter("item");
 if(!oItem.getSubmenu()){
 alertSelected(oItem.getId());
 }
});
```

--------------------------------

### Full ViewSettingsDialog with Event Handling

Source: https://github.com/ui5/openui5/blob/master/src/sap.m/test/sap/m/ViewSettingsDialog.html

Demonstrates a comprehensive ViewSettingsDialog setup with event handling for sorting, grouping, and filtering based on item keys. This example processes selections in the 'confirm' event.

```javascript
var vsd2 = new sap.m.ViewSettingsDialog("vsd2", {
    confirm: function (oEvent) {
        var p = oEvent.getParameters(),
            sSortPath = null,
            oSorter,
            sGroupPath = null,
            oGroupFunction = null,
            oGrouper,
            aFilters = null,
            oCallback = null,
            aTableSorters = [],
            aTableFilters = [],
            i = 0;

        // 1) create grouper based on key
        if (p.groupItem) {
            // decide based on id
            switch (p.groupItem.getKey()) {
                case "myNameGrouper":
                    sGroupPath = "name";
                    oGroupFunction = util.Grouper.name;
                    break;
                case "myStatusGrouper":
                    sGroupPath = "status";
                    break;
                case "myValueGrouper":
                    sGroupPath = "limit";
                    oGroupFunction = util.Grouper.value;
                    break;
                case "myPriceGrouper":
                    sGroupPath = "price";
                    oGroupFunction = util.Grouper.price;
                    break;
            }

            // create grouper
            if (sGroupPath) {
                oGrouper = new sap.ui.model.Sorter(sGroupPath, p.groupDescending, (oGroupFunction ? oGroupFunction : true)); // true is default sorter
                aTableSorters.push(oGrouper);
            }
        }

        // 2) create sorter based on key
        if (p.sortItem) {
            // decide based on id
            switch (p.sortItem.getKey()) {
                case "myNameSorter":
                    sSortPath = "name";
                    break;
                case "myStatusSorter":
                    sSortPath = "status";
                    break;
                case "myValueSorter":
                    sSortPath = "limit";
                    break;
                case "myPriceSorter":
                    sSortPath = "price";
                    break;
            }

            // create sorter
            if (sSortPath) {
                oSorter = new sap.ui.model.Sorter(sSortPath, p.sortDescending);
                aTableSorters.push(oSorter);
            }
        }

        // 3) filtering (either preset filters or standard/custom filters)
        if (p.presetFilterItem) {
            // decide based on id
            switch (p.presetFilterItem.getKey()) {
                case "myPresetFilter1":
                    aFilters = presetFilters1;
                    break;
                case "myPresetFilter2":
                    aFilters = presetFilters2;
                    break;
                case "myPresetFilter3":
                    aFilters = presetFilters3;
                    break;
            }

            // add filters
            if (aFilters) {
                // the filter could be an array of filters or a single filter so we transform it to an array
                if (!Array.isArray(aFilters)) {
                    aFilters = [aFilters];
                }
                aTableFilters = aTableFilters.concat(aFilters);
            }
        } else {
            // standard/custom filters
            for (; i < p.filterItems.length; i++) {
                if (p.filterItems[i] instanceof sap.m.ViewSettingsCustomItem) {
                    // custom control filter
                    // decide based on id
                    switch (p.filterItems[i].getKey()) {
                        case "myPriceFilter":
                            oCallback = customPriceCallback;
                            break;
                    }
                    // call callback and add filters
                    if (oCallback) {
                        aFilters = oCallback.apply(this, [p.filterItems[i].getCustomControl()]);
                        if (aFilters) {
                            // the filter could be an array of filters or a single filter so we transform it to an array
                            if (!Array.isArray(aFilters)) {
                                aFilters = [aFilters];
                            }
                            aTableFilters = aTableFilters.concat(aFilters);
                        }
                    }
                } else if (p.filterItems[i] instanceof sap.m.ViewSettingsItem) {
                    // standard filter
                    // decide based on id
                    switch (p.filterItems[i].getKey()) {
                        case "name1":
                            aFilters = new sap.ui.model.Filter("name", sap.ui.model.FilterOperator.EQ, "Headphone");
                            break;
                        case "name2":
                            aFilters = new sap.ui.model.Filter("name", sap.ui.model.FilterOperator.EQ, "Mouse Pad");
                            break;
                        case "name3":
                            aFilters = new sap.ui.model.Filter("name", sap.ui.model.FilterOperator.EQ, "Monitor");
                            break;
                        case "name4":
                            aFilters = new sap.ui.model.Filter("name", sap.ui.model.FilterOperator.EQ, "Backpack");
                            break;
                        case "name5":
                            aFilters = new sap.ui.model.Filter("name", sap.ui.model.FilterOperator.EQ, "Printer");
                            break;
                        case "name6":
                            aFilters = new sap.ui.model.Filter("name", sap.ui.model.FilterOperator.EQ, "Optic Mouse");
                            break;
                    }
                    // add filters
                    if (aFilters) {
                        // the filter could be an array of filters or a single filter so we transform it to an array
                        if (!Array.isArray(aFilters)) {
                            aFilters = [aFilters];
                        }
                        aTableFilters = aTableFilters.concat(aFilters);
                    }
                }
            }
        }

        // apply sorters and filters to the table
        // this.getView().byId("productsTable").getBinding("items").sort(aTableSorters);
        // this.getView().byId("productsTable").getBinding("items").filter(aTableFilters);
    }
});
```

--------------------------------

### Setup Application and Model

Source: https://github.com/ui5/openui5/blob/master/src/sap.m/test/sap/m/PlanningCalendarWidth.html

Initializes the main application and sets up a JSON model with header content binding data. This is boilerplate for a SAPUI5 application.

```javascript
var app = new sap.m.App("myApp");
var oEventLabel = new sap.m.Label({text: "Events log"});
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({ headerContentBinding: [{ name: "Edward II", text: "headerContent aggregation with binding" }] });
app.setModel(oModel);
```

--------------------------------

### Setup Mock Server and OData Model for sap.m.Tree

Source: https://github.com/ui5/openui5/blob/master/src/sap.m/test/sap/m/Treeodata.html

Configures and starts a mock server to simulate OData responses. Initializes an OData v2 model with the mock server's URI.

```javascript
jQuery.sap.require("sap.ui.core.util.MockServer");
jQuery.sap.require("sap.ui.model.odata.v2.ODataModel");
var sServiceURI = "/odataFake/";
var sMetaDataURI = "mockdata/";

// configure respond to requests delay
sap.ui.core.util.MockServer.config({
    autoRespond : true,
    autoRespondAfter : 1000
});

// create mockserver
var oMockServer = new sap.ui.core.util.MockServer({
    rootUri : sServiceURI
});

// start mockserver
oMockServer.simulate(sMetaDataURI + "treemetadata.xml", sMetaDataURI);
oMockServer.start();

var oModel = new sap.ui.model.odata.v2.ODataModel(sServiceURI);
```

--------------------------------

### Create and Configure ExactBrowser

Source: https://github.com/ui5/openui5/blob/master/src/sap.ui.ux3/test/sap/ui/ux3/ExactBrowser.html

Demonstrates creating an ExactBrowser instance with various settings and attaching event handlers. Use this for basic setup and interaction.

```JavaScript
function createBrowserTest(oSettings, iExactBrowserNo, bInitAttributes) {
  var oExactBrowser = new sap.ui.ux3.ExactBrowser("EB"+iExactBrowserNo, oSettings);
  if(bInitAttributes){
    exactTestData.initAttributes(oExactBrowser); //attributes defined in ExactData.js
  }
  var iExactBrowserUIAreaNo = 3*iExactBrowserNo - 2;
  var oInput = new sap.ui.commons.TextField();
  oInput.placeAt("uiArea"+(iExactBrowserUIAreaNo-1));
  oInput = new sap.ui.commons.TextField();
  oInput.placeAt("uiArea"+(iExactBrowserUIAreaNo+1));
  oExactBrowser.setFollowUpControl(oInput);
  oExactBrowser.placeAt("uiArea"+iExactBrowserUIAreaNo);
  oExactBrowser.attachAttributeSelected(function(oEvent) {
    var aSelectedAttributes = oEvent.getParameter("allAttributes");
    var aSelectedAttributeNames = [];
    for(var idx=0; idx<aSelectedAttributes.length; idx++){
      var sName = aSelectedAttributes[idx].getText()+" (ID: "+aSelectedAttributes[idx].getId()+")";
      aSelectedAttributeNames.push(sName);
    }
    jQuery("#result"+iExactBrowserNo).html("Selected attributes:<br> * " + aSelectedAttributeNames.join("<br> * "));
  });
  return oExactBrowser;
}

// Example 1: Basic setup with options and event handlers
var oExactBrowser = createBrowserTest({showHeader: true, enableSave: true/*, enableListClose: true*/}, 1, true);
oExactBrowser.setOptionsMenu( new sap.ui.commons.Menu({ items : [new sap.ui.commons.MenuItem("i1", {text: "This menu comes from"}), new sap.ui.commons.MenuItem("i2", {text: "the application."})]})
);
oExactBrowser.attachSave(function(){alert("Saved!");});

// Example 2: With list closing enabled and fixed order
oExactBrowser = createBrowserTest({showHeader: true, enableListClose: true, topListOrder: sap.ui.ux3.ExactOrder.Fixed}, 2, true);

function setFixedListOrder(oAttribute){
  oAttribute.setListOrder(sap.ui.ux3.ExactOrder.Fixed);
  var aAttributes = oAttribute.getAttributes();
  for(var i=0; i<aAttributes.length; i++){
    setFixedListOrder(aAttributes[i]);
  }
}
setFixedListOrder(oExactBrowser.getAttributes()[0]);

// Example 3: With showTopList set to false and attribute selection/scrolling
oExactBrowser = createBrowserTest({showTopList: false}, 3, true);
var aAttributes = oExactBrowser.getAttributes();
for(var i=0; i<aAttributes.length; i++){
  if(i!=3){
    aAttributes[i].setSelected(true);
  }
  if(i==1){
    aAttributes[i].scrollTo(aAttributes[i].getAttributes()[30]);
  }
}
```

--------------------------------

### Custom Filter Function for Suggestions

Source: https://github.com/ui5/openui5/blob/master/src/sap.m/test/sap/m/Input.html

Implement a custom filter function for suggestions to control how the input matches suggestion items. This example only matches if the suggestion text starts with the input value.

```JavaScript
var oModel2 = new sap.ui.model.json.JSONModel();
oModel2.setData(aData);

var oSuggestInput4 = new sap.m.Input("suginput4", {
    placeholder: "Type first letter in uppercase",
    showSuggestion: true
});

oSuggestInput4.setModel(oModel);

oSuggestInput4.bindAggregation("suggestionItems", "/", new sap.ui.core.Item({text: "{name}"}));

oSuggestInput4.setFilterFunction(function(sValue, oItem){
    return oItem.getText().indexOf(sValue) === 0;
});
```

--------------------------------

### Configure and Start Mock Server

Source: https://github.com/ui5/openui5/blob/master/src/sap.m/test/sap/m/GrowingList.html

Sets up a mock server for OData requests. Configure response delay and simulate metadata and data from local files.

```javascript
jQuery.sap.require("sap.ui.core.util.MockServer");
jQuery.sap.require("sap.ui.model.odata.v2.ODataModel");
var sServiceURI = "/ProductSet/" ;
var sMetaDataURI = "mockdata/";
// configure respond to requests delay
sap.ui.core.util.MockServer.config({
    autoRespond : true,
    autoRespondAfter : 1000
});
// create mockserver
var oMockServer = new sap.ui.core.util.MockServer({
    rootUri : sServiceURI
});
// start mockserver
oMockServer.simulate(sMetaDataURI + "metadata.xml", sMetaDataURI);
oMockServer.start();
```

--------------------------------

### Initialize QUnit and Load UI5 Modules

Source: https://github.com/ui5/openui5/blob/master/src/sap.m/test/sap/m/qunit/P13nMemoryLeakChecks-createAndDestroy2x.qunit.html

Sets up QUnit for testing and asynchronously loads necessary UI5 modules. Ensure QUnit.config.autostart is false if you want to control test execution manually.

```javascript
QUnit.config.autostart = false;
jQuery(function() {
    /* global QUnit */
    sap.ui.require([
        "jquery.sap.global",
        "sap/ui/VersionInfo",
        "sap/ui/core/Element",
        "sap/ui/core/Lib",
        "sap/ui/test/utils/nextUIUpdate"
    ], async function(jQuery, VersionInfo, Element, Library, nextUIUpdate) {
```

--------------------------------

### PlanningCalendar with Legend Example

Source: https://github.com/ui5/openui5/blob/master/src/sap.m/test/sap/m/PlanningCalendarWithLegend.html

This snippet shows how to create a PlanningCalendar with a legend, defining standard and custom legend items for working days, non-working days, today, and various appointment types. It also includes the setup for the PlanningCalendar itself with rows and appointments.

```javascript
var StandardCalendarLegendItem = sap.ui.unified.StandardCalendarLegendItem,
    UI5Date = sap.ui.require("sap/ui/core/date/UI5Date"),
    oLegend = new sap.m.PlanningCalendarLegend("Legend1", {
        standardItems: [StandardCalendarLegendItem.WorkingDay, StandardCalendarLegendItem.NonWorkingDay, StandardCalendarLegendItem.Today],
        items: [
            new sap.ui.unified.CalendarLegendItem("T1", {
                type: sap.ui.unified.CalendarDayType.Type01,
                text: "Type 1 in Legend Calendar area"
            }),
            new sap.ui.unified.CalendarLegendItem("T2", {
                type: sap.ui.unified.CalendarDayType.Type02,
                text: "Type 2 in Legend Calendar area"
            }),
            new sap.ui.unified.CalendarLegendItem("T3", {
                type: sap.ui.unified.CalendarDayType.Type03,
                text: "Type 3 in Legend Calendar area"
            }),
            new sap.ui.unified.CalendarLegendItem("T4", {
                type: sap.ui.unified.CalendarDayType.Type04,
                text: "Type 4 in Legend Calendar area"
            }),
            new sap.ui.unified.CalendarLegendItem("T5", {
                type: sap.ui.unified.CalendarDayType.Type05,
                text: "Type 5 in Legend Calendar area"
            }),
            new sap.ui.unified.CalendarLegendItem("T6", {
                type: sap.ui.unified.CalendarDayType.Type06,
                text: "Type 6 in Legend Calendar area"
            }),
            new sap.ui.unified.CalendarLegendItem("T7", {
                type: sap.ui.unified.CalendarDayType.Type07,
                text: "Type 7 in Legend Calendar area"
            }),
            new sap.ui.unified.CalendarLegendItem("T8", {
                type: sap.ui.unified.CalendarDayType.Type08,
                text: "Type 8 in Legend Calendar area"
            }),
            new sap.ui.unified.CalendarLegendItem("T9", {
                type: sap.ui.unified.CalendarDayType.Type09,
                text: "Type 9 in Legend Calendar area"
            }),
            new sap.ui.unified.CalendarLegendItem("T10", {
                type: sap.ui.unified.CalendarDayType.Type10,
                text: "Type 10 in Legend Calendar area"
            })
        ],
        appointmentItems: [
            new sap.ui.unified.CalendarLegendItem("T31", {
                type: sap.ui.unified.CalendarDayType.Type01,
                text: "Type Private Appointment"
            }),
            new sap.ui.unified.CalendarLegendItem("T32", {
                type: sap.ui.unified.CalendarDayType.Type02,
                text: "Type Face2Face Appointment"
            }),
            new sap.ui.unified.CalendarLegendItem("T33", {
                type: sap.ui.unified.CalendarDayType.Type12,
                text: "Type Public Appointment"
            })
        ]
    });

var app = new sap.m.App("myApp");

var oPC1 = sap.m.PlanningCalendar("PC1", {
    startDate: UI5Date.getInstance("2015", "0", "1", "08", "00"),
    rows: [
        new sap.m.PlanningCalendarRow("Row1", {
            icon: "sap-icon://employee",
            title: "Max Mustermann",
            text: "Musterteam",
            tooltip: "Header tooltip",
            intervalHeaders: [
                new sap.ui.unified.CalendarAppointment("R1H1", {
                    startDate: UI5Date.getInstance("2015", "0", "1", "09", "00"),
                    endDate: UI5Date.getInstance("2015", "0", "1", "11", "00"),
                    type: sap.ui.unified.CalendarDayType.Type02,
                    title: "SAPUI5",
                    tooltip: "Test",
                    icon: "sap-icon://sap-ui5"
                })
            ],
            appointments: [
                new sap.ui.unified.CalendarAppointment("R1A1", {
                    startDate: UI5Date.getInstance("2015", "0", "1", "08", "00"),
                    endDate: UI5Date.getInstance("2015", "0", "2", "09", "00"),
                    type: sap.ui.unified.CalendarDayType.Type03,
                    title: "2 days meeting",
                    icon: "../ui/unified/images/m_01.png",
                    tooltip: "2 days meeting",
                    text: "Room 1"
                }),
                new sap.ui.unified.CalendarAppointment("R1A2", {
                    startDate: UI5Date.getInstance("2014", "11", "31", "10", "45"),
                    endDate: UI5Date.getInstance("2015", "0", "3", "09", "00"),
                    type: sap.ui.unified.CalendarDayType.Type06,
                    title: "Appointment 2",
                    icon: "sap-icon://home",
                    tooltip: "Tooltip 2",
                    text: "Home",
                    tentative: true
                }),
                new sap.ui.unified.CalendarAppointment("R1A3", {
                    startDate: UI5Date.getInstance("2014", "11", "31", "08", "30"),
                    endDate: UI5Date.getInstance("2015", "0", "1", "09", "30"),
                    type: sap.ui.unified.CalendarDayType.Type02,
                    title: "Blocker 3",
                    icon: "sap-icon://home",
                    tooltip: "Tooltip 3"
                }),
                new sap.ui.unified.CalendarAppointment("R1A4", {
                    startDate: UI5Date.getInstance("2015", "0", "1", "09", "45"),
                    endDate: UI5Date.getInstance("2015", "0", "1", "10", "45"),
                    type: sap.ui.unified.CalendarDayType.Type09,
                    title: "Meeting 4",
                    tooltip: "Tooltip 4",
                    selected: true
                })
            ]
        }),
        new sap.m.PlanningCalendarRow("Row2", {
            icon: "../ui/unified/images/m_01.png",
            title: "Edward",
            text: "the great",
            tooltip: "Header tooltip",
            intervalHeaders: [
                new sap.ui.unified.CalendarAppointment("R2H1", {
                    startDate: UI5Date.getInstance("2015", "0", "2", "00", "00"),
                    endDate: UI5Date.getInstance("2015", "0", "2", "23", "59"),
                    type: sap.ui.unified.CalendarDayType.Type01,
                    title: "SAPUI5",
                    tooltip: "Test",
                    icon: "sap-icon://sap-ui5"
                })
            ],
            appointments: [
                new sap.ui.unified.CalendarAppointment("R2A1", {
                    startDate: UI5Date.getInstance("2015", "0", "1", "00", "00"),
                    endDate: UI5Date.getInstance("2015", "0", "2", "23", "59"),
                    type: sap.ui.unified.CalendarDayType.Type01,
                    title: "Event 1",
                    icon: "../ui/unified/images/m_01.png",
                    tooltip: "Tooltip 1",
                    text: "Room 1"
                }),
                new sap.ui.unified.CalendarAppointment("R2A2", {
                    startDate: UI5Date.getInstance("2015", "0", "2", "00", "00"),
                    endDate: UI5Date.getInstance("2015", "0", "2", "23", "59"),
                    type: sap.ui.unified.CalendarDayType.Type02,
                    title: "Event 2",
                    icon: "sap-icon://home",
                    tool
                })
            ]
        })
    ]
});

app.addPage(oPC1);
app.placeAt("content");

```

--------------------------------

### Configure and Start Mock Server

Source: https://github.com/ui5/openui5/blob/master/src/sap.m/test/sap/m/GrowingListComplex.html

Sets up a mock server to simulate OData responses for testing. Configure response delay and load metadata and data from local files.

```javascript
jQuery.sap.require("sap.ui.core.util.MockServer");
jQuery.sap.require("sap.ui.model.odata.v2.ODataModel");

var sServiceURI = "/ProductSet/" ;
var sMetaDataURI = "mockdata/";

// configure respond to requests delay
sap.ui.core.util.MockServer.config({
    autoRespond : true,
    autoRespondAfter : 2000
});

// create mockserver
var oMockServer = new sap.ui.core.util.MockServer({
    rootUri : sServiceURI
});

// start mockserver
oMockServer.simulate(sMetaDataURI + "metadata.xml", sMetaDataURI);
```

--------------------------------

### Initialize PlanningCalendar with Appointments and Custom Content

Source: https://github.com/ui5/openui5/blob/master/src/sap.m/test/sap/m/PlanningCalendarWidth.html

This snippet initializes a sap.m.PlanningCalendar with a start date, rows, and appointments. It includes examples of custom data, interval headers, special dates, and appointments with custom content using FlexBox and Icons. Use this as a base for creating complex calendar views.

```javascript
var oPC1 = new sap.m.PlanningCalendar("PC1", {
  startDate: UI5Date.getInstance("2015", "0", "1", "08", "00"),
  rows: [
    new sap.m.PlanningCalendarRow("Row1", {
      customData: new sap.ui.core.CustomData({key: "myKey", value: "myValue", writeToDom: true}),
      icon: "../ui/unified/images/m_01.png",
      title: "Max Mustermann",
      text: "Musterteam",
      tooltip: "Header tooltip",
      specialDates: [
        new sap.ui.unified.DateTypeRange({
          startDate: UI5Date.getInstance(2015, 0, 7),
          endDate: UI5Date.getInstance(2015, 0, 8),
          type: sap.ui.unified.CalendarDayType.NonWorking
        })
      ],
      intervalHeaders: [
        new sap.ui.unified.CalendarAppointment("R1H1", {
          startDate: UI5Date.getInstance("2015", "0", "1", "09", "00"),
          endDate: UI5Date.getInstance("2015", "0", "1", "11", "00"),
          type: sap.ui.unified.CalendarDayType.Type02,
          title: "SAPUI5",
          tooltip: "Test",
          icon: "sap-icon://sap-ui5"
        })
      ],
      appointments: [
        new sap.ui.unified.CalendarAppointment("R1A1", {
          startDate: UI5Date.getInstance("2015", "0", "1", "08", "00"),
          endDate: UI5Date.getInstance("2015", "0", "2", "09", "00"),
          type: sap.ui.unified.CalendarDayType.Type03,
          customContent: [
            new sap.m.FlexBox({ direction: "Column", items: [
              new sap.m.Text({ text: "TG2P11: Maintenance" }),
              new sap.m.FlexBox({ items: [
                new sap.ui.core.Icon({ src: "sap-icon://pharmacy" }),
                new sap.ui.core.Icon({ src: "sap-icon://add-product" }),
                new sap.ui.core.Icon({ src: "sap-icon://employee-rejections" }),
                new sap.ui.core.Icon({ src: "sap-icon://doctor", color: "gray" }),
                new sap.ui.core.Icon({ src: "sap-icon://add-employee", color: "gray" })
              ] })
            ] })
          ],
          title: "2 days meeting",
          icon: "../ui/unified/images/m_01.png",
          tooltip: "2 days meeting",
          text: "Room 1"
        }),
        new sap.ui.unified.CalendarAppointment("R1A2", {
          startDate: UI5Date.getInstance("2014", "11", "31", "10", "45"),
          endDate: UI5Date.getInstance("2015", "0", "3", "09", "00"),
          type: sap.ui.unified.CalendarDayType.Type06,
          title: "Appointment 2",
          icon: "sap-icon://home",
          tooltip: "Tooltip 2",
          text: "Home",
          tentative: true
        }),
        new sap.ui.unified.CalendarAppointment("R1A3", {
          startDate: UI5Date.getInstanc
```

--------------------------------

### Install jsdoc-to-markdown Globally

Source: https://github.com/ui5/openui5/blob/master/src/sap.ui.mdc/test/sap/ui/mdc/testutils/opa/JSDocGeneration.md

Installs jsdoc-to-markdown globally. This is an alternative installation method recommended if local installation fails.

```bash
npm install -g jsdoc-to-markdown
```