There are many frontend technologies in old application. WebForms, DevExpress webforms, DevExpress MVC with ScriptSharp and jquery. DevExtreme as javascript solution.

====== Webforms, DevExpress controls ======

Some pages are as webforms (*.aspx), or webforms controls (*.ascx). For both Id element attributes are very necessary. These are mostly as properties in code behind.

    <asp:Label runat="server" ID="lblRom" meta:resourcekey="lblRomResource1" Text="ROM: "></asp:Label>

Most components are from devexpress package

    <dx:ASPxComboBox Width="100%" ID="ddPHMDivisionSelect" runat="server"
       DataSourceID="DSPHMDivision" ValueField="Item1" TextField="Item2" Text='<%# Bind("DivisionIdText") %>'>
    </dx:ASPxComboBox>

Data for controls are bound to particular (mostly static) class and method mostly via DataSourceID attributes, for our comboBox above, definition for data source class is

    <asp:ObjectDataSource ID="DSPHMDivision" runat="server"
       SelectMethod="GetDivisionsDS" TypeName="PSAS.Business.PHM.CacheManager">
    </asp:ObjectDataSource>
    
Webforms has some limited html like markup for e.g. conditions, call methods e.g. Component usage is preffered.

Examples:

Gridview with edit form with hidden field for special usage of updating, inserting rows. Input in row without binding - [PR](https://protank.visualstudio.com/_git/PD/pullrequest/1361?_a=files)

Each devexpress webform control has some client control name, which is used from javascript e.g.

    <dx:ASPxHiddenField ClientInstanceName="hiddenInput" ....
    
Then the hidden input can be accessed from javascript as global object hiddenInput. 
There are special situations for control inside tabs. For correct reference this inner tab controls from more tabs in javascript, it's necessary don't use ClientInstanceName from markup and use dynamic client instance name initialization inside code behind

e.g.

   protected void Page_Load(object sender, EventArgs e) {
      hiddenInput.ClientInstanceName = "fhAddFormInfo" + fuelId;
   }   

Example: bug in fuel administration for more tabs with fuel types [[https://protank.visualstudio.com/_git/PD/pullrequest/1492|PR]]

Event when the controls are initialized - [[https://protank.visualstudio.com/_git/PD?path=%2FApplication%2FPSASWeb%2FPD.Master&version=GBmaster&line=247&lineStyle=plain&lineEnd=248&lineStartColumn=1&lineEndColumn=1|Webforms master page]]

====== DevExpress MVC ======

All elements with their names are processed by some devexpress global JS and these are in accessible in JS a global variables.
Sometimes, devexpress controls are in DOM (via server sider rendering) condtionally. It's necessary use [[https://protank.visualstudio.com/_git/PD/pullrequest/1402?_a=files|check]] for checking of undefined type.

Fo ajax forms, it's necessary to preserve correct binding for server side calls. HTML elements names must be same as properties
on serve side. When the name of DevExpress control is changed e.g. DevExpressConrol.Name property for combo box in Razor/HTML. It's necessary use other field - mostly hidden field - to store value of original control. This hidden field value must be updated when original combo box value is changed, mostly via DevExpress change event. Example [[https://protank.visualstudio.com/_git/PD/pullrequest/1396?_a=files|fix for road office]].


Event when the controls are initialized - [[https://protank.visualstudio.com/_git/PD?path=%2FApplication%2FPSASWeb%2FViews%2FShared%2F_PD.cshtml&version=GBmaster&line=336&lineStyle=plain&lineEnd=337&lineStartColumn=1&lineEndColumn=1|MVC master page]]

====== Resources, translations, language versions ======

Webforms and MVC frontends uses series of //resx// files for languages strings and translations.
For Webforms, each control can have meta:resoucekey attribute, which is key into resx file. 

Be aware, that resx files can be transformed via xdt transformations. e.g. [[https://protank.visualstudio.com/PD/_git/PD?path=%2FApplication%2FConfiguration%2Fpsas%2FResources%2FModules%2FL11%2FShifts%2FApp_LocalResources%2FCollectionsGridControl.ascx.cs-CZ.xdt&version=GBmaster&_a=contents|Application/Configuration/psas/Resources/Modules/L11/Shifts/App_LocalResources/CollectionsGridControl.ascx.cs-CZ.xdt]]. These are normally called only for build and deploy process on CI. Transformation isn't triggered for local development, so these messages aren't translated when application is developed locally.


https://protank.visualstudio.com/_git/PD/pullrequest/1677?_a=files
====== React in old PD1 application ======

Calling the API: there is some controllers on server side. It's necessary to make changes in DTOs on server and client. 

  * makes the changes on server side first (some DTOs)
  * build the assembly
  * call NSwaggerStudio, load the config from Application/PSASWeb/Areas/API (e.g. CoreServiceNSwagConfig)
  * regenerate C#, typescript clients
  * call the clients from the mobx state objects

Most of src is ''Application/PSASWeb/React/src'': stores - for states and business logic, components, for components. TSX files are mostly for html. For hot reloading is necessary in this dir call ''npm run dev''. ''npm run build-dev'' builds files.
In browser, source map works, try to CTRL + SHIFT + f for searching function/method call. Sometimes it's necessary to call `npm install` mostly when builds return error message about missing package e.g.

    ERROR in ./src/node_modules/pd-client-controls/PDFormElements/PDMaskedInput.tsx
    Module not found: Error: Can't resolve 'react-maskedinput'

  * All event processing is through event component props which update mobx state via actions. Some actions are called only via one method. So copy state object is necessary.
  * Form validation is according refs. Input components needs to have 'ref' prop, 'required' prop, and validate prop for own validation

See some react related tasks for more information and examples.

====== React components ======
Grid

important props
  * rows - list of objects - rows. For columns, see later
  * updateHeightInModal - necessary for showing grid in modal
  * customRowSettings.customButtons - array for the settings for special row properties, mostly for popup menu

<code>
<DataGrid.Grid
            key={"id"}
            rows={this.workPlanStore.sewerCollections}
            showRowSelectionCheckbox={true}
            selectedRowKey={"id"}
            isLoading={false}
            showFilterRow={true}
            // list of rows necessary, without this, grid doesn't work either
            selectedRowValues={this.workPlanStore.selectedRowsIds.slice()}
            // necessary for show grid in modal
            updateHeightInModal={true}
            onRowsSelected={(x) => this.workPlanStore.setSelectedRows(x)}
            // settings for row popup menu which is available at the end of row on ... 
            customRowSettings={{
                visible: true,
                displayEdit: false,
                displayDelete: false,
                customButtons: [
                   { name: "planning", title: localize("sewerDrainGrid.planning"), icon: "" },
                   { name: "detail", title: localize("sewerDrainGrid.workPlanDetail"), icon: "" },
                ],
                handleButtonClick: this.handleRowButtonClick
            }}
            onRowsDeselected={(x) => this.workPlanStore.setDeselectedRows(x)}
        >

        </DataGrid.Grid>
</code>

Stores and observables
====== Internet Explorer Support ======

Protank Dynamics web application is supported for Internet Explorer 11 browser. There are some troubles with it.
E.g. Syntax error in some JavaScript stops execution of following JavaScript calls.

Recommendation for debugging web app in in IE
  * Disable or remove all Addons from browser
  * Use development tools via F12 in own non-docked windows.
  * Stop showing log messages in Console, there is a lot of messages from Identity Server. It's possible //only via left mouse button menu in Console// - menu Item 'Log'. 
  * Try to find errors in Console first, specially for JavaScript syntax errors, exceptions etc.
  * **Don't select** JavaScript file for debugging via //search for file by name// - left top corner - it's very slow and all Development Tools stop working.
  * Has debugger unconnected (menu Debugger, icon of plug point) whenever possible. It slows down all tools a lot. Connect debugger only if necessary.

Task which fixes some IE troubles

  * BC compatible Javascrit [[https://protank.visualstudio.com/_git/PD/pullrequest/1431?_a=overview|PR]]
  * IE compatible CSS [[https://protank.visualstudio.com/_git/PD/commit/9f3a2948dea37d06b660832591b4a8f0ea8eb466|commit]]