Angepasste Anzeigen erstellen

Datei < Anzeigename> .js erstellen

Stellen Sie sicher, dass die Syntax der Datei <Screen name>.js den Standards von Dojo Version 1.8 entspricht. Die angepasste Anzeige muss sc/plat/dojo/widgets/Screenerweitern. Außerdem können Sie die folgenden von der Anwendung bereitgestellten Standards verwenden:

• Sie können scDefine anstelle von defineverwenden.
• Sie können den importierten JavaScript -Modulen die Zeichenfolge scbase/loader! voranstellen. Die Zeichenfolge scbase/loader ist ein Dojo-Loader-Plug-in, das von der Anwendung bereitgestellt wird. Stellen Sie einem HTML-Dateipfad eine dojo/text! -Zeichenfolge entsprechend der Dojo-Syntax voran.

Stellen Sie sicher, dass alle angepassten Anzeigedateien im Ordner <INSTALL_DIR>/extensions/wsc/webpages erstellt werden. Da sich die Dateien in WAR im Ordner extn befinden, stellen Sie dem Paket das Präfix extnvoran.

Beispiel für eine MyOrderScreen Datei

scDefine([
	"dojo/text!./templates/MyOrderScreen.html",
	"scbase/loader!dijit/form/Button",
	"scbase/loader!dojo/_base/declare",
	"scbase/loader!idx/form/TextBox",
	"scbase/loader!idx/layout/ContentPane",
	"scbase/loader!sc/plat/dojo/utils/BaseUtils",
	"scbase/loader!sc/plat/dojo/utils/EventUtils",
	"scbase/loader!sc/plat/dojo/widgets/Label",
	"scbase/loader!sc/plat/dojo/widgets/Link",
	"scbase/loader!sc/plat/dojo/widgets/Screen"
],
function(
	templateText,
	_dijitButton,
	_dojodeclare,
	_idxTextBox,
	_idxContentPane,
	_scBaseUtils,
	_scEventUtils,
	_scLabel,
	_scLink,
	_scScreen
) {
    return _dojodeclare("extn.customScreen.MyOrderScreen", [_scScreen], {
		templateString: templateText,
		uId: "customScreen",
		packageName: "extn.customScreen",
		className: "MyOrderScreen",
     showRelatedTask: true,
		namespaces: {
			targetBindingNamespaces: [{
				description: 'The input to the getOrderList mashup.',
				value: 'getOrderList'
			}],
			sourceBindingNamespaces: [{
				description: 'Initial input to screen',
				value: 'screenInput'
			}, {
				description: 'The list of organizations the current user can search for orders with.',
				value: 'getOrganizationList_output'
			}, {
				description: 'The response from the getOrderList mashup',
				value: 'getOrderList_output'
			}]
		},
		staticBindings: [{
            targetBinding: {
                path: 'Order.ApplyQueryTimeout',
                namespace: 'getOrderList'
            },
            sourceBinding: {
                sourceValue: 'Y',
                path: 'Order.ApplyQueryTimeout'
            }
        }],
		events: [{
			name: 'onPopupConfirm'
		}, {
			name: 'openOrderListPage'
		}],
		subscribers: {
			local: [{
				eventId: 'saveCurrentPage',
				sequence: '25',
				handler: {
					methodName: "save"
				}
			}, {
                eventId: 'afterScreenLoad',
                sequence: '25',
                handler: {
                    methodName: "updateEditorHeader"
                }
            },
			{
				eventId: 'bFindOrder_onClick',
				sequence: '30',
				description: '',
				handler: {
					methodName: "orderSearchAction",
					description: ""
				}
			}],
		},
		
		save: function() {
			var eventDefinition = null;
			_scEventUtils.fireEventToParent(this, "onSaveSuccess", eventDefinition);
		},

	 updateEditorHeader: function(
        event, bEvent, ctrl, args) {
            _iasBaseTemplateUtils.updateCustomerMessage(
            this, "CUST_ItemBrowsing", true);
            _iasBaseTemplateUtils.updateTitle(
            this, "blank", null);
            _scScreenUtils.focusFirstEditableWidget(
            this);
            return true;
        },

		orderSearchAction: function(event, bEvent, ctrl, args) {
			this.orderSearch();
		},
		orderSearch: function() {
			var root = null;
			root = _scBaseUtils.getTargetModel(this, "getOrderList", null);
			var eventDefinition = null;
			_scEventUtils.fireEventToParent(this, "openOrderListPage", eventDefinition);
		}
	});
});

ignoreStaticBindingsForAddressCapture:function(){
			var ignoreList = [{
				sourceBinding: {
					path: 'PersonInfo.AddressLine3',
					namespace: 'screenInput'
				},
n				targetBinding: {
					path: 'PersonInfo.AddressLine3',
					namespace: 'verifyAddress_input'
				}
			}];
			scScreenUtils.ignoreStaticBindings(this,ignoreList)
		}

In der folgenden Tabelle werden einige wichtige Attribute einer Anzeige beschrieben.

Erstellen Sie die Datei templates/< Anzeigename> .html.

Die Datei templates/<Screen name>.html gibt die Benutzerschnittstelle für eine Anzeige wieder. Sie enthält alle in der Anzeige vorhandenen Widgets und entspricht der Dojo-Syntax 1.8 . Es wird verwendet, um Widgets deklarativ mithilfe einer HTML-Datei zu erstellen.

Stellen Sie sicher, dass die HTML-Datei der Anzeige im Ordner templates relativ zur JS-Datei der angepassten Anzeige erstellt wird.

Beispiel für MyOrderScreen

<div class="sc-platform-screen-default myorderscreen">
	<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="
		spanLabel: true,
		resourceId: 'WSCORD0001',
		'class': 'wscScreen portlet',
		colspan: 1,
		uId: 'portletPanel',
		layoutAlign: 'top',
		scParamDataFn: function() {
			return {
				'aria-label': this.getSimpleBundleString('Order')
			}
		}
	" role="region">
		<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="
			spanLabel: true ,
			'class': 'contentSeparator portletHeader',
			uId: 'portletHeaderPanel'  
		">
			<div data-dojo-type="sc/plat/dojo/widgets/Label" data-dojo-props="
				'class': 'primaryInformation',
				uId: 'portletName',
				scParamDataFn: function() {
					return {
						value: this.getSimpleBundleString('Order')
					}
				}
			" role='heading'></div>
		</div>
		<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="
			spanLabel: true,
			'class': 'PortletContent singlecolumntable',
			uId: 'findOrderPanel'
		">
			<div data-dojo-type="idx/form/TextBox" data-dojo-props="
				uId: 'txtOrderNo',
				scParamDataFn: function() {
					return {
						bindingData: {
							targetBinding: [{
								path: 'Order.OrderNo',
								namespace: 'getOrderList'
							}],
							sourceBinding: {
								path: 'Order.OrderNo',
								namespace: 'screenInput'
							}
						},
						label: this.getBundleString('OrderNo')
					}
				}
			"></div>
			<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="
				'class': 'portletSearchBar',
				uId: 'pnlSearchBar'
			">
				<div data-dojo-type="dijit/form/Button" data-dojo-props="
					spanLabel: true,
					resourceId: 'WSCORD0001',
					showLabel: true,
					uId: 'bFindOrder',
					scParamDataFn: function() {
						return {
							label: this.getSimpleBundleString('FindOrder')
						}
					}
				"></div>
                <div data-dojo-type="sc/plat/dojo/widgets/Link" data-dojo-props="
					spanLabel: true,
					resourceId: 'WSCRTORD0001',
					'class': 'createLink',
					uId: 'bCreate',
					scParamDataFn: function() {
						return {
							value: this.getSimpleBundleString('CreateOrder')
						}
					}
				"></div>
            </div>
		</div>
	</div>
</div>

Gemäß dem Anwendungsstandard enthält data-dojo-props das Funktionsattribut scParamDataFn . Dieses Attribut gibt ein JSON-Objekt mit dynamisch ausgewerteten Werten wie Beschriftung, Titel oder bindingData für das Widget zurück.

Da die folgenden Widgets in der Anwendung verwendet werden, unterstützt sie Bindungen und das von der Anwendung bereitgestellte Ereignisframework:

Bearbeitbare Widgets

• idx.form.CheckBox
• idx.form.CheckBoxList
• idx.form.DateTextBox
• idx.form.FilteringSelect
• idx.form.NumberTextBox
• idx.form.RadioButtonSet
• idx.form.Textarea
• idx.form.TextBox
• idx.form.CurrencyTextBox

Nicht bearbeitbare Widgets

• dijit.form.Button
• sc.plat.dojo.widgets.DataLabel
• dijit.form.TextBox (als verdecktes Widget verwenden)
• sc.plat.dojo.widgets.Image
• sc.plat.dojo.widgets.Link
• sc.plat.dojo.widgets.Label

Container

• idx.layout.ContentPane
• idx.layout.MoveableTabContainer
• idx.layout.TitlePane

Spezielle Widgets

• sc.plat.dojo.widgets.Screen -das Basisanzeigenwidget
• sc.plat.dojo.widgets.ControllerWidget -wird zum Halten von Anzeigen in einer Anzeige verwendet
• sc.plat.dojo.widgets.IdentifierControllerWidget -wird zum Halten von Anzeigen in einer Anzeige verwendet
• gridx.Grid -Raster
• sc.plat.dojo.widgets.IdentifierScreen -wird für Address -Anzeigen verwendet
• sc.plat.dojo.widgets.IFrame -I-Frame-Widget
• sc.plat.dojo.widgets.Editor -Editor-Widget
• sc.plat.dojo.widgets.Wizard -Assistent

• saveCurrentPage -Dieses Ereignis tritt auf, um nicht gespeicherte Daten auf der aktuellen Assistentenseite zu speichern.
• reloadScreen -Dieses Ereignis tritt beim Klicken auf 'Zurück' auf, um die vorherige Seite im Assistenten erneut zu laden.
• handleTabClose -Dieses Ereignis tritt auf, wenn ein Editor geschlossen wird Vor dem Schließen des Assistenten wird eine Warnung angezeigt, in der der Benutzer aufgefordert wird, alle nicht gespeicherten Daten auf der Seite zu speichern. Stellen Sie sicher, dass der handleTabClose -Ereignissubskribent für neue Assistenten definiert wird, damit der Benutzer beim Schließen des Editors aufgefordert wird, Daten zu speichern.

Anzeige "Zugehörige Tasks" anzeigen

Sie können die Anzeige "Zugehörige Tasks" entweder in einem Editor oder in einem Assistenten aufrufen. Um die Anzeige "Zugehörige Tasks" in einem Editor anzuzeigen, setzen Sie den Wert von showRelatedTask auf true. Um die Anzeige "Zugehörige Tasks" in einem Assistenten anzuzeigen, setzen Sie den Wert von showRelatedTaskInWizard auf true.

Anzeige für verwandte Tasks einbetten

Die Prozedur zum Erstellen der Anzeige für verwandte Tasks entspricht der Prozedur zum Erstellen einer angepassten Anzeige. Integrieren Sie die Anzeige für zugehörige Tasks in die entsprechende HTML-Editordatei.

Nachdem Sie die Anzeige für verwandte Tasks eingebettet haben, können Sie die verwandten Tasks aus-oder einblenden. Um verwandte Tasks ein-oder auszublenden, fügen Sie in den angepassten Anzeigen einen Subskribenten und einen Handler für das Ereignis afterScreenLoad hinzu. In der angepassten Anzeige enthält der Ereignishandler updateEditorHeader beispielsweise die Methode updateTitle , mit der zusammengehörige Tasks ein-oder ausgeblendet werden können.

Angepasste Anzeige in der Anwendung hinzufügen und anzeigen

Sie können die angepasste Anzeige in der Anwendung in einem Editor, einem Assistenten, einem Popup-Fenster usw. hinzufügen und anzeigen. Normalerweise werden zum Hinzufügen und Anzeigen der angepassten Anzeigen die Dienstprogramme ControllerUtils, BaseUtilsund WizardUtilsverwendet. Verwenden Sie beispielsweise zum Öffnen von Anzeigen in einem Editor die Methoden, die in ControllerUtilsbereitgestellt werden. Verwenden Sie zum Öffnen von Assistenten in einem Editor WizardUtilsund zum Öffnen einer Anzeige in einem Popup-Fenster BaseUtils. Die am häufigsten verwendeten Methoden sind openScreenInEditor, openWizardInEditor, continueOpeningInEditorund UIUtils.openSimplePopup. Weitere Informationen zur Verwendung anderer Methoden finden Sie in der JavaScript -Dokumentation.

Editor wiederverwenden