Wiki source for TransitionToHtml5


Show raw source

====Transition to HTML 5====

HTML 5 forms allow a much improved user experience without the overhead associated with downloads of large chunks of javascript as the functionality is now built into modern browsers. Much of the validation that is performed at the server can be done on in the browser now directly significantly improving the user experience.

===What to Do?===

Existing forms need to be modified to take advantage of the new input types - changing <input type="text" > tags to <input type= :

~**//number//**
~**//tel//**
~**//url//**
~**//email//**

with **//placeholder//** and **//required//** attributes as necessary.

e.g.
%%(php)
echo '<input type="tel" name="PhoneNo" required="required" placeholder="' . _('Customer telephone number') . '" title="' . _('Enter the customer telephone number') . '" />';
%%


++input type="number" also need to have appropriate **//min="x"//** and **//max="y"//** and **//step//**. ++

++Note that step is particularly important as the default step is 1 and where we need to put in a number with 2 decimal places we need to enter a step="0.01" or 10 to the power of negative 2
expressed in php as:

%%(php)
pow(10,-2);
%%
So for a number with 2 decimal places we need to enter the following:
%% (php)
echo '<input type="number" step="' . pow(10,-2) . '" name="SomeNumberWith2DeciamlPlaces" />
%%

more commonly the number of decimal places will be one of

~$_SESSION['CurrDeciamlPlaces'] - where the number is in the home currency
~The number of decimal places that the stock item is held to when entering a quantity
~The number of decimal places of the customer's currency when entering an FX price
++

After researching //<input type="number"// it is clear we have an issue with decimal points and thousands separators which are not handled that well in different browsers and if we wish to retain this nice feature we need to just use

%%(php)
<input type="text" pattern="[0-9,\.]*" class="number" name="SomeNumber" />
%%


All number fields should also be members of the class="number" so our javascript prevents text input too as the html5 allows the numbers to be typed but shows a message once the error has occurred. I really not sure there is much benefit in adding the pattern for numbers given we are already trapping them with Tim's javascript.

The pattern can also be used to add checking for the dodgy characters by restricting to pattern="[a-zA-Z0-9_]*" handy for supplier item, customer codes.

Also all input elements need to have **//title//** attributes - defined using gettext strings to set spelling out exactly what is required in the field.

The field that should have the focus on the form needs to have the **//autofocus//** attribute set too - with

%%(php)
autofocus="autofocus"
%%

Example: Areas.php

change
%%(php)
<td><input tabindex="1" ' . (in_array('AreaCode',$Errors) ? 'class="inputerror"' : '' ) .' type="text" name="AreaCode" value="' . $_POST['AreaCode'] . '" size="3" maxlength="3" /></td>
<td><input tabindex="2" ' . (in_array('AreaDescription',$Errors) ? 'class="inputerror"' : '' ) .' type="text" name="AreaDescription" value="' . $_POST['AreaDescription'] .'" size="26" maxlength="25" /></td>
%%

to

%%(php)
<td><input tabindex="1" ' . (in_array('AreaCode',$Errors) ? 'class="inputerror"' : '' ) .' type="text" name="AreaCode" required="required" autofocus="autofocus" value="' . $_POST['AreaCode'] . '" size="3" maxlength="3" title="' . _('Enter the sales area code - up to 3 characters are allowed') . '" /></td>
<td><input tabindex="2" ' . (in_array('AreaDescription',$Errors) ? 'class="inputerror"' : '' ) .' type="text" required="required" name="AreaDescription" value="' . $_POST['AreaDescription'] .'" size="26" maxlength="25" title="' . _('Enter the description of the sales area') . '" /></td>
%%


===Improvements to Tim's javascript file===
I like this because it is small 12kb and efficient and we are not stuck with 200k of redundant javascript - as we are with jQuery. The snag with it though is that it is only English messages from the javascript

~1. It now allows a new class "integer" so we should use that where possible too - this only allows positive integers so quite useful.

~2. sortTable functions now sorts tables by column - need to add
%%(html)
<th class="SortableColumn" onclick="SortSelect(this)">
%%
for those columns that need to be sortable

and the style sheets need to have a class style for "SortableColumn"

th.SortableColumn {
~cursor: s-resize;
}

I think the style needs some embellishing here though

Using this combination of html5, titles and bits of Tim's nice javascript file for number/integer and table sorting should give us a large leap in usability.

------
Scripts to Modify

++AccountGroups.php++
++AccountSections.php++
++AddCustomerContacts.php++
++AddCustomerNotes.php++
++AddCustomerTypeNotes.php++
++AgedDebtors.php++
++AgedSuppliers.php++
++Areas.php++
++AuditTrail.php++
++BackupDatabase.php++
++BankAccounts.php++
++BankMatching.php++
++BankReconciliation.php++
++BOMExtendedQty.php++
++BOMIndented.php++
++BOMIndentedReverse.php++
++BOMInquiry.php++
++BOMListing.php++
++BOMs.php++
++COGSGLPostings.php++
++CompanyPreferences.php++
++ConfirmDispatchControlled_Invoice.php++
++ConfirmDispatch_Invoice.php++
++ContractBOM.php++
++ContractCosting.php++
++ContractOtherReqts.php++
++Contracts.php++
++CopyBOM.php++
++CounterReturns.php++
++CounterSales.php++
++Credit_Invoice.php++
++CreditItemsControlled.php++
++CreditStatus.php++
++Currencies.php++
++CustEDISetup.php++
++CustLoginSetup.php++
++CustomerAllocations.php++
++CustomerBranches.php++
++CustomerInquiry.php++
++CustomerPurchases.php++
++CustomerReceipt.php++
++Customers.php++
++CustomerTransInquiry.php++
++CustomerTypes.php++
++CustWhereAlloc.php++
++DailyBankTransactions.php++
++DailySalesInquiry.php++
++DebtorsAtPeriodEnd.php++
++DeliveryDetails.php++
++Departments.php++
++DiscountCategories.php++
++DiscountMatrix.php++
EDIMessageFormat.php
EDIProcessOrders.php
EDISendInvoices.php
EDISendInvoices_Reece.php
++EmailConfirmation.php++
++EmailCustTrans.php++
ExchangeRateTrend.php
++Factors.php++
++FixedAssetCategories.php++
++FixedAssetDepreciation.php++
++FixedAssetItems.php++
++FixedAssetLocations.php++
++FixedAssetRegister.php++
++FixedAssetTransfer.php++
FormDesigner.php
FreightCosts.php
FTP_RadioBeacon.php
geocode_genxml_customers.php
geocode_genxml_suppliers.php
geocode.php
GeocodeSetup.php
geo_displaymap_customers.php
geo_displaymap_suppliers.php
GetStockImage.php
++GLAccountCSV.php++
++GLAccountInquiry.php++
++GLAccountReport.php++
++GLAccounts.php++
++GLBalanceSheet.php++
++GLBudgets.php++
++GLCodesInquiry.php++
++GLJournalInquiry.php++
++GLJournal.php++
++GLProfit_Loss.php++
++GLTagProfit_Loss.php++
++GLTags.php++
++GLTransInquiry.php++
++GLTrialBalance_csv.php++
GLTrialBalance.php
GoodsReceivedControlled.php
++GoodsReceived.php++
++ImportBankTransAnalysis.php++
++ImportBankTrans.php++
index.php
InternalStockCategoriesByRole.php
InternalStockRequestAuthorisation.php
InternalStockRequestFulfill.php
InternalStockRequest.php
InventoryPlanning.php
InventoryPlanningPrefSupplier.php
InventoryQuantities.php
InventoryValuation.php
++Labels.php++
++Locations.php++
Logout.php
MailingGroupMaintenance.php
MailInventoryValuation.php
MailSalesReport_csv.php
MailSalesReport.php
++MaintenanceReminders.php++
++MaintenanceTasks.php++
++MaintenanceUserSchedule.php++
++Manufacturers.php++
++MaterialsNotUsed.php++
++MRPCalendar.php++
++MRPCreateDemands.php++
++MRPDemands.php++
++MRPDemandTypes.php++
++MRP.php++
++MRPPlannedPurchaseOrders.php++
++MRPPlannedWorkOrders.php++
++MRPReport.php++
++MRPReschedules.php++
++MRPShortages.php++
++NoSalesItems.php++
++OffersReceived.php++
++OrderDetails.php++
++OutstandingGRNs.php++
++PageSecurity.php++
++PaymentAllocations.php++
++PaymentMethods.php++
++Payments.php++
++PaymentTerms.php++
++PcAssignCashToTab.php++
++PcAuthorizeExpenses.php++
++PcClaimExpensesFromTab.php++
++PcExpenses.php++
++PcExpensesTypeTab.php++
++PcReportTab.php++
++PcTabs.php++
++PcTypeTabs.php++
++PDFBankingSummary.php++
PDFChequeListing.php
PDFCustomerList.php
PDFCustTransListing.php
++PDFDeliveryDifferences.php++
++PDFDIFOT.php++
++PDFGLJournal.php++
++PDFGrn.php++
++PDFLowGP.php++
++PDFOrdersInvoiced.php++
++PDFOrderStatus.php++
++PDFPeriodStockTransListing.php++
++PDFPickingList.php++
++PDFPriceList.php++
++PDFPrintLabel.php++
PDFQuotation.php
PDFQuotationPortrait.php
PDFReceipt.php
PDFRemittanceAdvice.php
PDFSellThroughSupportClaim.php
PDFStockCheckComparison.php
PDFStockLocTransfer.php
PDFStockNegatives.php
PDFStockTransfer.php
PDFSuppTransListing.php
PDFTopItems.php
PeriodsInquiry.php
PO_AuthorisationLevels.php
PO_AuthoriseMyOrders.php
PO_Chk_ShiptRef_JobRef.php
PO_Header.php
PO_Items.php
PO_OrderDetails.php
PO_PDFPurchOrder.php
POReport.php
++PO_SelectOSPurchOrder.php++
++PO_SelectPurchOrder.php++
PricesBasedOnMarkUp.php
PricesByCost.php
Prices_Customer.php
++Prices.php++
PrintCheque.php
PrintCustOrder_generic.php
PrintCustOrder.php
PrintCustStatements.php
PrintCustTrans.php
PrintCustTransPortrait.php
PurchData.php
RecurringSalesOrders.php
RecurringSalesOrdersProcess.php
ReorderLevelLocation.php
ReorderLevel.php
report_runner.php
ReprintGRN.php
ReverseGRN.php
SalesAnalReptCols.php
SalesAnalRepts.php
SalesAnalysis_UserDefined.php
SalesByTypePeriodInquiry.php
SalesCategories.php
SalesCategoryDescriptions.php
SalesCategoryPeriodInquiry.php
SalesGLPostings.php
SalesGraph.php
SalesInquiry.php
SalesPeople.php
SalesTopItemsInquiry.php
SalesTypes.php
SecurityTokens.php
SelectAsset.php
SelectCompletedOrder.php
SelectContract.php
SelectCreditItems.php
SelectCustomer.php
SelectGLAccount.php
SelectOrderItems.php
SelectProduct.php
SelectRecurringSalesOrder.php
SelectSalesOrder.php
SelectSupplier.php
SelectWorkOrder.php
SellThroughSupport.php
ShipmentCosting.php
Shipments.php
Shippers.php
Shipt_Select.php
ShiptsList.php
ShopParameters.php
SMTPServer.php
SpecialOrder.php
StockAdjustmentsControlled.php
StockAdjustments.php
StockCategories.php
StockCheck.php
StockCostUpdate.php
StockCounts.php
StockDispatch.php
StockLocMovements.php
StockLocStatus.php
StockLocTransfer.php
StockLocTransferReceive.php
StockMovements.php
StockQties_csv.php
StockQuantityByDate.php
StockReorderLevel.php
StockSerialItemResearch.php
StockSerialItems.php
Stocks.php
StockStatus.php
StockTransferControlled.php
StockTransfers.php
StockUsageGraph.php
StockUsage.php
SuppContractChgs.php
SuppCreditGRNs.php
SuppFixedAssetChgs.php
SuppInvGRNs.php
SupplierAllocations.php
SupplierBalsAtPeriodEnd.php
SupplierContacts.php
SupplierCredit.php
SupplierInquiry.php
SupplierInvoice.php
SupplierPriceList.php
Suppliers.php
SupplierTenderCreate.php
SupplierTenders.php
SupplierTransInquiry.php
SupplierTypes.php
SuppLoginSetup.php
SuppPaymentRun.php
SuppPriceList.php
SuppShiptChgs.php
SuppTransGLAnalysis.php
svn-commit.tmp
SystemParameters.php
TaxAuthorities.php
TaxAuthorityRates.php
TaxCategories.php
TaxGroups.php
Tax.php
TaxProvinces.php
TopItems.php
TopItems.php.edited
UnitsOfMeasure.php
UpgradeDatabase.php
UserSettings.php
WhereUsedInquiry.php
WorkCentres.php
WorkOrderCosting.php
WorkOrderEntry.php
WorkOrderIssue.php
WorkOrderReceive.php
WorkOrderStatus.php
WOSerialNos.php
WWW_Access.php
++WWW_Users.php++
Valid XHTML :: Valid CSS: :: Powered by WikkaWikiGet webERP Accounting & Business Management at SourceForge.net. Fast, secure and Free Open Source software downloads