SkyVisualEditor VisualforcePage Import User Manual

Transcription

1 SkyVisualEditor VisualforcePage Import User Manual Ver February 26 th, 2015 TerraSky co., ltd.

2 Content 1. Preface Notice... 4 (1) Request to the customer... 4 (2) Trademarks... 4 (3) SkyVisualEditorSpecifications... 5 a. Generate Apex Class as SkyVisualEditor s original <apex:page> extensions attribute... 5 b. StandardController + extensions logic... 5 c. Support API version is d. One output for <apex:form> tag Utilization Procedure Convert to SkyVisualEditor page (1) CodeBlock component a. How to create new CodeBlock Component b. Placement Limitations c. CodeBlock Property i. Additional Attributes Property ii. Edit CodeBlock Property iii. Layout Property (2) Additional Attributes and Additional Styles a. List of components that can be set by Additional Attributes and Additional Styles b. About Additional Attributes Property c. About Additional Styles Property (3) List of problems Lists of SkyVisualEditor-VisualforceTags (1) List of Visualforce Tags that can be converted to SkyVisualEditor components (2) List of Visualforce tag Attributes that can be converted to component property a. Page Tab b. Component tabs i. InputField ii. OutputField iii. OutputLabel... 33

3 iv. SectionHeader v. PageBlock vi. PageBlockSection vii. TabPanel viii. Tab ix. DataTable x. RelatedList xi. ChatterFeed xii. SaveButton xiii. EditButton xiv. CancelButton xv. DeleteButton xvi. CustomButton xvii. FreeText xviii. BlankSpace xix. CustomLink xx. Image (3) facet import examples of DataTable Component... 69

4 1. Preface This document covers information related to SkyVisualEditor s Visualforce Import feature. This feature will allow users to import and modify Salesforce Visualforce pages on SkyVisualEditor Studio. 2. Notice (1) Request to the customer Unauthorized reproduction of this manual is forbidden. Although every attempt has been made to ensure quality of this manual, if you find any problems or errors please let us know. Please use the contents of this manual at your own risk. TerraSky cannot be held responsible for any trouble, lawsuit, etc. resulting either directly or indirectly from the use of this manual. We reserve the right to update this manual at any time without warning. (2) Trademarks TerraSky, the TerraSky logo, SkyVisualEditor and the SkyVisualEditor logo are registered trademarks of TerraSky co., Ltd. Salesforce.com, Salesforce and corresponding logos are registered trademarks of salesforce.com, Inc., and salesforce.com owns other registered and unregistered trademarks. Other names used herein may be trademarks of their respective owners.

5 (3) SkyVisualEditorSpecifications Visualforce page generated by SkyVisualEditor will have four distinctive features as below. Please be reminded that it will have the same effect to the imported Visualforce Pages. a. Generate Apex Class as SkyVisualEditor s original <apex:page> extensions attribute The Visualforce Import feature will not import Apex Class extension attributes of the Visualforce page. Please use Apex Class extension to define the logics of Apex class. b. StandardController + extensions logic Business logic is processed with Standard Controller and Apex class with extension attributes. StandardSetControllers and Custom Controllers are exempt from this and will cause an error at the import. c. Support API version is 31.0 Supported API version for the Visualforce Page import is Support will be the same as generating Visualforce Page and Apex Class. d. One output for <apex:form> tag The specification of generated Visualforce page will be to have one <apex:form>tag. Visualforce page code will be read within SkyVisualEditor s output <apex:form>tag at the import process. Therefore, every <apex:form>tag on the Visualforce will be deleted. SkyVisualEditor Chatter feed or component which is converted to RelatedList will be moved to locations below: -if placed higher than the first <apex:form> tag, it will be moved to the upper section of the <apex:form> tag in the Studio -if placed lower than the first <apex:form> tag, it will be moved to the lower section of the <apex:form> tag in the Studio. *Note: If you would like to write the code or set the component outside of <apex:form> tag, please move it manually.

6 3. Utilization Procedure Below is a summarized flow of how to import the Visualforce page to the SkyVisualEditor s Studio screen. Please see below for the procedure.

7 Select Import Visualforce page Select a page to Import will show up with the list of available Visualforce pages that are saved on Salesforce organization. Select the Visualforce page and click OK to import the page.

8 The Visualforce page will be deployed to the Studio Canvas and its name will be SVE_name of the selected Visualforce Page. Visualforce tags that can be converted to SkyVisualEditor components will appear like the image below in red box. Please refer to <5 Lists of SkyVisualEditor- VisualforceTags> conversion for more details on conversion target of Visualforce tags and its attributes. Visualforce tags which does not exist as any of the component property will be categorized as Additional Attributes. Click button of the Additional Attributes property. Please refer to < エラー! 参照元が見つかりません About Additional Attributes Property> for more details. CSS Styles that does not exist as component property will be categorized as Additional Styles. Please refer to < エラー! 参照元が見つかりません About Additional Styles Property> for more details. Please refer to < エラー! 参照元が見つかりません List of components >or more details on SkyVisualEditor s components that can be set by Additional Attributes and Additional Styles. Visualforce tags, HTML, CSS, Javascript and comments that are exempted from conversion target

9 will be displayed as CodeBlock component which will show its original code (see upper section of the image below). Please refer to < エラー! 参照元が見つかりません CodeBlock component> for more details. The lower section of the image displays alerts and errors which occurred at the Visualforce Page import. This list will help you to check errors and modify the corresponding components accordingly. Please refer to < エラー! 参照元が見つかりません List of problems> for more details. When assigning an Apex Class to the Extensions Attribute of <apex:page> tag and process it as action, please configure from Apex Class Extensions To add Please check the link below to chapter <5-1 Apex Class Extension> on SkyVisualEditor User Manual for more details. SkyVisualEditor User Manual

10 After you have modified (added, edited or deleted) your components, save or deploy the page.

11 4. Convert to SkyVisualEditor page (1) CodeBlock component Visualforce codes that could not be converted to SkyVisualEditor components will be displayed as CodeBlock component and show its original code. Users can add new CodeBlock Components to Salesforce Layout, Free Layout and Dashboard Layout. a. How to create new CodeBlock Component Find CodeBlock Component under the Component tab, then drag and drop to the canvas to create your new component.

12 An area for <apex:form> tag output will display. Please watch out for the tag s internal and external area and place the CodeBlock accordingly. Create CodeBlock Component page will appear when the CodeBlock is placed. Codes can be written just as same as writing codes for Visualforce page. Root element must be either in a tag format (e.g. <table>) or a comment format (e.g. <!-- comment -->). Click OK after the code is written to display the CodeBlock.

13 b. Placement Limitations There are limitations on where CodeBlocks can be placed. When creating for the first time (when dragging and dropping from the left) Cannot be added to Panel Grid Cell/Table column Comments cannot be placed directly below a page block section. (If a child of a CodeBlock has a comment, that CodeBlock can be placed in a page block section) When a code block contains Chatter / Related list children Can only be moved outside of the <apex:form> tag When a CodeBlock contains children other than Chatter/Related List/CodeBlock/Comment Can only be moved in the <apex:form> tag When a page block section is contained in a CodeBlock Can only be moved as the child of a page block SkyVisualEditor components can be dragged and dropped to CodeBlock.

14 c. CodeBlock Property Below is the Property for CodeBlocks. Property Detail Development Additional Attributes Set Attribute Values for root tag. Edit CodeBlock Edit Attribute Value and child element. layout Resize When checked and deployed, the CodeBlock will be placed in <apex:outputpanel> tags and output with width and hight information as below. Available only for Salesforce Layout or Dashboard Layout. Width[px] Set the width (px) for output at deploy. Check yes to enable this property. Height[px] Set the height (px) for output at deploy. Check yes to enable this property. Left (X) Set the Left(X) for output at deploy. Available only for Free Layout. Top (Y) Set the Top(Y) for output at deploy. Available only for Free Layout. i. Additional Attributes Property Click button of Additional Attributes Property to edit the attribute value of root tags, Please refer to < エラー! 参照元が見つかりません About Additional Attributes Property> for more details.

15 ii. Edit CodeBlock Property Click button of Edit CodeBlock Property to edit the CodeBlock value of root tags. Edit screen will show up to edit root tag attributes and child elements. Tags with namespace containing sve (e.g. <sve:outputlabel> can be moved around in within the area but cannot delete, register new tags, and change its attributes.layout Property

16 iii. Layout Property Size and location information of the CodeBlock can be output if the Resize Property is turned on or not shown. If so, the CodeBlock will be in <apex:outputpanel> tag. [Example of Salesforce Layout] [Example of Free Layout]

17 (2) Additional Attributes and Additional Styles a. List of components that can be set by Additional Attributes and Additional Styles Below is the list of SkyVisualEditor components which allows Property settings of Additional Attributes and Additional Styles. Tab name Component Name Additional Additional Attributes Styles Page - Component InputField OutputField OutputLabel SectionHeader PageBlock PageBlockSection Tab DataTable Facet RelatedList ChatterFeed SaveButton EditButton CancelButton DeleteButton CustomButton FreeText BlankSpace CustomLink Image CodeBlock SearchButton SelectButton ClearButton reportcommandbutton NextButton BackButton ActivationButton

18 DeleteOrderButton StartSyncButton CreatePDF Button LookUpButton

19 b. About Additional Attributes Property Attributes without component property or CodeBlock attributes can be added by Additional Attributes property. icon will appear if Additional Attributes Property exists in the subject component. Click Additional Attributes Property s button to lookup, add, edit or delete. list. Edit Attributes screen will pop up. An error will occur if the Key is blank or overlaps in the same c. About Additional Styles Property CSS Style which does not exist in component property can be added by Additional Styles. Just like writing the Style Attribute, use semicolon (;) to separate and specify more than one style.

20 (3) List of problems Below is a list of details on "FATAL" or "WARN" error messages at Visualforce page import error. Items Del Button Status Description Del Button will show when the status is WARN. Click the Del Button when you have checked the details and ready to erase the row. FATAL or WARN message will display. Pages that are not yet deployed can be saved even with FATAL. Please be aware that once the page is deployed, every FATAL problem must be fixed to save and to deploy again. Pages can be saved and deployed with WARN warning messages. Error Place Content Subject component s ID will display. If the status is FATAL, the color of the component will be in red, yellow when in WARN status. Display details of FATAL and WARN. For WARN, a related information of the code will show on the right column.

21 Having Auto Filter checked on when selecting a component will display only the related information of the component. Select the row and enter Ctrl+c to copy. Click View import log to view information that have been deleted by Del Button. Import Logs screen will display with list of all FATAL and WARN output as problems.

22 5. Lists of SkyVisualEditor-VisualforceTags (1) List of Visualforce Tags that can be converted to SkyVisualEditor components Below is a list of Visualforce tags that can be converted to SkyVisualEditor components after the page import. Please refer to < 5(2) List of Visualforce tag Attributes that can be converted to component property> for the list of Visualforce tag attributes that are converted to related components property. Exempted details will be output as WARN. *Note: Tags with an asterisk mark (*) will be excluded at the point of conversion even if it has child element. Details on the excluded tags will be an output for WARN. Visualforce Tag SVE Component Name Special Conditions Element Subelement Page apex:page apex:stylesheet, apex:includescript InputField apex:inputfield* apex:outputfield*, OutputField apex:outputtext* OutputLabel apex:outputlabel* SectionHeader apex:sectionheader* PageBlock apex:pageblock apex:pageblockbuttons PageBlockSection apex:pageblocksection Tab apex:tabpanel apex:tab Text child element directly under the page will be converted as FreeText components. Available when value is a MergeField. If the object or item could be identified, it will be read as Label Component. If not identified, it will be read as FreeText component.

23 apex:column apex:facet name="header" apex:inputfield apex:datatable,apex:pageb DataTable apex:outputfield locktable apex:outputtext apex:commandbutton apex:commandlink apex:image img RelatedList apex:relatedlist* chatter:feedwithfollowers ChatterFeed *, chatter:feed* SaveButton apex:commandbutton* action="{!save}" codes will be read as SaveButton component. EditButton action="{!edit}" codes will be read as EditButton component. CancelButton action="{!cancel}" codes will be read as CancelButton component. DeleteButton CustomButton action="{!delete}" codes will be read as DeleteButton component. Actions besides the list above will be read as CustomButton component. FreeText apex:outputtext* Tags with children element will not be converted to FreeText component. It will remain as CodeBlock. Available when the value is not a MergeField. When PageBlockSection Read as BlankSpace component when PageBlockSection contains BlankSpace contains<apex:outputpanel ></apex:outputpanel> <apex:outputpanel> without children element or attribute. CustomLink apex:commandlink* Image apex:image*, img*

24 (2) List of Visualforce tag Attributes that can be converted to component property SkyVisualEditor component property will read the attribute value of Visualforce tag as below. If the attribute does not exist as SkyVisualEditor s property, it will be written in - of the property name. Additionally, attributes that are not on this list will be not supported and excluded with WARN warning message. Division Signs on the Division category are as below: 〇 : Attribute of Visualforce tag does exist in SkyVisualEditor property, Therefore, it will be imported. :Attribute of Visualforce tag does not exist in SkyVisualEditor property. Therefore, it will be imported as Additional Attributes. W : Attributes and Child Elements that cannot be imported as Additional Attributes or Additional Styles will be excluded with WARN warning message. : Visualforce tag or attribute does not correspond with the SkyVisualEditor property. a. Page Tab Property name Divisio n* Tag name Attribute Valu e Limitations or points of caution Main Object name apex:page StandardController VisualforcePage name apex:page Name If the page does not use StandardControll er, it will be read as a code without main object. Every page will be read as SVE_name. If the Name Attribute does not exist, it will refer to its original name and read it as SVE_page

25 name Edit - DisplayLable apex:page Label Description Edit - ApexClass name - Sharing rule is active - Skip LookUp Text - Page display size (px) resolution - Width - Height - Show Header apex:page showheader Show Sidebar apex:page sidebar SubStyle apex:page tabstyle PageTitle apex:page title Set URL parameter - Activate Inline Editing - Output Field List - cache apex:page cache contenttype apex:page contenttype doctype apex:page doctype expires apex:page expires language apex:page language rendered apex:page rendered setup apex:page setup showchat apex:page showchat standardstylesheets apex:page standardstylesheets wizard apex:page wizard Activate Page mask - Input column, button - Entire Page - Specify Deployed Class - Extension Class - Test Class - Main Object Item additional acquisition -

26 Edit meta tag - Edit page style - Include setting for stylesheet apex:stylesheet Value Edit pagescript - Include setting for JavaScript apex:includescript Value Activate calculation formula - Edit calculation formula - Activate focus color - Pink, Blue - Destination after creating a new page - Destination after editing a page - Destination after deleting a page - Create PDF apex:page renderas Pdf Page size - Orientation of the paper [vertical] - Orientation of the paper [horizontal] - Set margin - increase the limit of number - - W apex:page action - W apex:page apiversion Only for renderas="pdf". Other setting values will be deleted and show WARN warning message. API version is fixed to 31.0 and will delete the setting values and show WARN warning

27 message. - W apex:page applybodytag - W apex:page applyhtmltag - W apex:page controller - W apex:page extensions - W apex:page readonly The standard feature of SkyVisualEditor is used, which will delete the setting values and show WARN warning message. The standard feature of SkyVisualEditor is used, which will delete the setting values and show WARN warning message. A page that does not use StandardControll er will be exempted and show WARN warning message. Apex Class is created by SkyVisualEditor so it will be exempted and show WARN warning message. It cannot be used in SkyVisualEditor.

28 - W apex:page recordsetvar - W apex:includescript id - W apex:includescript loadonready - W apex:stylesheet id Setting values will be deleted and show WARN warning message. It cannot be used in SkyVisualEditor. Setting values will be deleted and show WARN warning message.

29 b. Component tabs i. InputField Property name Di vi si on * Tag name Attribute Value ID apex:inputfield id Reference API name for object API reference name for item apex:inputfield value Width [px] apex:inputfield style width Height [px] apex:inputfield style height Font Color apex:inputfield style color Font Size apex:inputfield style font-size Font Weight apex:inputfield style font-weight Align Horizontal apex:inputfield style text-align IME Mode apex:inputfield style ime-mode Required apex:inputfield required StyleClass apex:inputfield styleclass Help Mode - - apex:pageblocksec Help Text tionitem helptext Limitations or points of caution The value of apex:page StandardControll er will be read as the object s field name. Available only in pixels. Other metrics will be read as Additional Styles. Available only in pixels. Other metrics will be read as Additional Styles. If the parent element of apex:inputfield

30 Action - JavaScript apex:inputfield onblur JavaScript apex:inputfield onchange JavaScript apex:inputfield onclick JavaScript apex:inputfield ondblclick JavaScript apex:inputfield onfocus JavaScript apex:inputfield onkeydown JavaScript apex:inputfield onkeypress JavaScript apex:inputfield onkeyup JavaScript apex:inputfield onmousedown JavaScript apex:inputfield onmousemove JavaScript apex:inputfield onmouseout JavaScript apex:inputfield onmouseover JavaScript apex:inputfield onmouseup JavaScript apex:inputfield onselect Item display label apex:inputfield label Prefix - - Font Color - - Font Size - - Font Weight - - Suffix - - Font Color - - Font Size - - Font Weight - - Look Up - Select Custom LookUp screen - - Select Action - Use default check value - Default Check Value - is apex:pageblocks ectionitem, the helptext attribute will be read as sve:inputfield attribute.

31 Set Width - Radio Button - Display null - Checkbox - Display Layout - Decimal separator - Display link to DateStamp - apex:inputfield list - apex:inputfield rendered - apex:inputfield showdatepicker - apex:inputfield taborderhint - apex:inputfield type

32 ii. OutputField Property name Di vi si on * Tag name Attribute Value ID apex:outputfield id Reference API name for object Item Display Labe Reference API name for item apex:outputfield value Set Width Width [px] apex:outputfield style width HTML Escape apex:outputtext escape Font Color apex:outputfield style color Font Size apex:outputfield style font-size Font Weight apex:outputfield style font-weight Underline apex:outputfield style text-decoration Align Horizontal apex:outputfield style text-align Display as link - - Open a link in a new window - - Set Height Height [px] apex:outputfield style height Display overflow apex:outputfield style overflow Radio Button Display Layout Checkbox - apex:outputfield dir - apex:outputfield lang - apex:outputfield rendered - apex:outputfield styleclass - apex:outputfield title Limitations or points of caution Available only for Underline value. Otherwise they will be read as Additional Styles.

33 - apex:outputtext dir - apex:outputtext label - apex:outputtext lang - apex:outputtext rendered - apex:outputtext styleclass - apex:outputtext title Display Label value apex:outputfield label iii. OutputLabel Di vi Property name si on Tag name Attribute Value Limitations or points of caution * ID apex:outputlabel id Reference API name for object apex:outputlabel value Display Item Label apex:outputlabel value Reference API name for item apex:outputlabel value Edit Value - Value apex:outputlabel Text Child HTML Escape apex:outputlabel escape Font Color apex:outputlabel Style color Font Size apex:outputlabel Style font-size Font Weight apex:outputlabel Style Bold Tooltip apex:outputlabel Title StyleClass apex:outputlabel styleclass - apex:outputlabel accesskey - apex:outputlabel Dir - apex:outputlabel For - apex:outputlabel Lang - apex:outputlabel onblur - W apex:outputlabel onclick Only used when the object, fields are able to be analyzed to a certain degree, Otherwise they will be read as FreeText. The standard feature of SkyVisualEditor is used,

34 which will delete the setting values and show WARN warning message. - apex:outputlabel ondblclick - apex:outputlabel onfocus - apex:outputlabel onkeydown - apex:outputlabel onkeypress - apex:outputlabel onkeyup - apex:outputlabel onmousedown - apex:outputlabel onmousemove - apex:outputlabel onmouseout - apex:outputlabel onmouseover - apex:outputlabel onmouseup The standard feature of SkyVisualEditor is used, - W apex:outputlabel rendered - apex:outputlabel tabindex which will delete the setting values and show WARN warning message. iv. SectionHeader Di vi Property name si on * Tag name Attribute Value Edit Value - Title apex:sectionheader Title Subtitle apex:sectionheader Subtitle Description apex:sectionheader Description - apex:sectionheader Id - apex:sectionheader Help - apex:sectionheader printurl - apex:sectionheader Rendered Limitations or points of caution

35 v. PageBlock Di Property name vis io Tag name Attribute Valu e Limitations or points of caution n* Wrapper ID - ID apex:pageblock Id Title apex:pageblock Title Display mode apex:pageblock mode Show Conditions apex:pageblock rendered Display Button Area apex:pageblockbuttons location Set actionregion - - ActionRegion codes will be read as CodeBlock. - apex:pageblock Dir - apex:pageblock helptitle - apex:pageblock helpurl - apex:pageblock Lang - apex:pageblock onclick - apex:pageblock ondblclick - apex:pageblock onkeydown - apex:pageblock onkeypress - apex:pageblock onkeyup - apex:pageblock onmousedown - apex:pageblock onmousemove - apex:pageblock onmouseout - apex:pageblock onmouseover - apex:pageblock onmouseup - apex:pageblock tabstyle - W apex:pageblockbuttons Dir - W apex:pageblockbuttons Id - W apex:pageblockbuttons Lang - W apex:pageblockbuttons onclick - W apex:pageblockbuttons ondblclick - W apex:pageblockbuttons onkeydown - W apex:pageblockbuttons onkeypress - W apex:pageblockbuttons onkeyup - W apex:pageblockbuttons onmousedown

36 - W apex:pageblockbuttons onmousemove - W apex:pageblockbuttons onmouseout - W apex:pageblockbuttons onmouseover - W apex:pageblockbuttons onmouseup - W apex:pageblockbuttons rendered - W apex:pageblockbuttons style - W apex:pageblockbuttons styleclass - W apex:pageblockbuttons Title

37 vi. PageBlockSection Di Property name vi si on Tag name Attribute Valu e Limitations or points of caution * Wrapper ID - ID apex:pageblocksection id Title apex:pageblocksection title HTML Escape - Number of columns apex:pageblocksection columns Show Header apex:pageblocksection showheader Show Collapse apex:pageblocksection collapsible Set Header Color - Font Color - Background Color - Types of frame border - Frame border width - Frame border color - Corner roundness - Show Conditions apex:pageblocksection rendered Set actionregion - - actionregion codes will be read as CodeBlock. - apex:pageblocksection dir - apex:pageblocksection lang - apex:pageblocksection onclick - apex:pageblocksection ondblclick - apex:pageblocksection onkeydown - apex:pageblocksection onkeypress - apex:pageblocksection onkeyup - apex:pageblocksection onmousedown - apex:pageblocksection onmousemove - apex:pageblocksection onmouseout - apex:pageblocksection onmouseover - apex:pageblocksection onmouseup

38 vii. TabPanel Di Property name sp la Tag name Attribute Valu e Limit and point of precautions y* Wrapper ID - ID apex:tabpanel Id Show Conditions apex:tabpanel Rendered - apex:tabpanel contentclass Information about colors will be set in - W apex:tabpanel activetabclass SkyVisualEditor. Setting values will be deleted and show WARN warning message. Information about colors will be set in - W apex:tabpanel inactivetabclass SkyVisualEditor. Setting values will be deleted and show WARN warning message. - apex:tabpanel contentstyle - apex:tabpanel Dir - apex:tabpanel disabledtabclass - apex:tabpanel headeralignment - apex:tabpanel headerclass - apex:tabpanel headerspacing - apex:tabpanel Height - apex:tabpanel Immediate - apex:tabpanel Lang - apex:tabpanel Onclick - apex:tabpanel Ondblclick - apex:tabpanel Onkeydown - apex:tabpanel Onkeypress - apex:tabpanel Onkeyup - apex:tabpanel Onmousedown - apex:tabpanel Onmousemove - apex:tabpanel Onmouseout - apex:tabpanel Onmouseover - apex:tabpanel Onmouseup - apex:tabpanel rerender - apex:tabpanel selectedtab

39 - apex:tabpanel Style - apex:tabpanel switchtype - apex:tabpanel tabclass - apex:tabpanel Title - apex:tabpanel Value - apex:tabpanel Width W apex:tabpanel styleclass Setting values besides switchtype="client" will be deleted and show WARN warning message. The standard feature of SkyVisualEditor is used, which will delete the setting values and show WARN warning message.

40 viii. Tab Property name Di vi si on * Tag name Attribute Active Tab Color - Inactive Tab Color - StyleClass apex:tab styleclass ID apex:tab Id Show Conditions apex:tab rendered Title apex:tab Label Theme - - apex:tab disabled - apex:tab Focus - apex:tab immediate - apex:tab label Width - apex:tab Name - apex:tab onclick - apex:tab oncomplete - apex:tab ondblclick - apex:tab onkeydown - apex:tab onkeypress - apex:tab onkeyup - apex:tab onmousedown - apex:tab onmousemove - apex:tab onmouseout - apex:tab onmouseover - apex:tab onmouseup - apex:tab ontabenter - apex:tab ontableave - apex:tab rerender - apex:tab status - apex:tab Style - apex:tab switchtype - apex:tab timeout Valu e Limitations or points of caution Setting values besides switchtype="client" will be deleted and show WARN warning message.

41 - apex:tab Title ix. DataTable 1 <apex:datatable> Di vi Property name si on * Tag name Attribute Value Wrapper ID - ID apex:datatable Id Limitations or points of caution Pages will be imported as standard Controller s object (Tables without relations) if it matches with all of the conditions below. Object Label Name apex:datatable Value Var Reference Item Label Name Reference API name for reference item - apex:datatable value Adjust to page width size Width [px] apex:datatable width -if <apex:page> tag recordsetvar attribute exists. -if <apex:page> tag extensions attribute does not exist. -if <apex:datatable> tag value and <apex:page> tag recordsetvar match. Set as SkyVisualEditor s default value.

42 apex:datatable style Width Set height Height [px] apex:datatable style height Adjust row height Header row height [px] Detail row height [px] Maximum number of records apex:datatable rows Set Output Tag Fix Header Theme Header Color Show Record Counts - Paging is available - Show number of Pages - Add Row Button is available - Edit the value of Add Row - Read without metric unit or in pixel only. Otherwise the setting value will be deleted and show WARN warning message. If the width attribute exists, setting values will be deleted and show WARN warning message. Metric unit will be in pixel. Otherwise it will be read as Additional Styles. Metric unit will be in pixel. Otherwise it will be read as Additional Styles. Default setting will be 500 if rows setting does not exist. Fix DataTable Theme will be read as none as default

43 Button Add Row Button Value - Set the number of rows to add - Initial number of rows to add - Delete row button is available - Edit the value of Delete Button - Delete Button Value - Bulk Edit - Edit the value of Bulk Edit button - Bulk Edit Button Value - Select Delete - Edit the value of Select Delete Button - Select Delete Button Value - Clone Row Button is available - Edit the value of Clone Button - Clone Button Value - Show checkbox column - Show Table message - Set Table Message - Search inside Table - Release required Item - Filter condition - Lookup Item - Select Custom Lookup screen - Parameter - Edit value of Acquire Master Button - Acquire Master Button Value - JavaScript - Object Item additional acquisition - Show Conditions apex:datatable rendered Frame Border Width StyleClass apex:datatable styleclass - W apex:datatable columns Number of columns is

44 - apex:datatable align - apex:datatable bgcolor - W apex:datatable border - apex:datatable captionclass - apex:datatable captionstyle - apex:datatable cellpadding - apex:datatable cellspacing - apex:datatable columnclasses - W apex:datatable columnswidth - apex:datatable dir - apex:datatable first - apex:datatable footerclass - apex:datatable frame - apex:datatable headerclass - apex:datatable lang - apex:datatable onclick - apex:datatable ondblclick - apex:datatable onkeydown - apex:datatable onkeypress - apex:datatable onkeyup - apex:datatable onmousedown - apex:datatable onmousemove - apex:datatable onmouseout - apex:datatable onmouseover - apex:datatable onmouseup - apex:datatable onrowclick - apex:datatable onrowdblclick - apex:datatable onrowmousedown - apex:datatable onrowmousemove - apex:datatable onrowmouseout - apex:datatable onrowmouseover set by SkyVisualEditor. Setting values will be deleted and show WARN warning message.

45 - apex:datatable onrowmouseup - apex:datatable rowclasses - apex:datatable rules - apex:datatable style - apex:datatable summary - apex:datatable title - W apex:datatable var Set as SkyVisualEditor s default value. Setting value will be deleted and show WARN warning message. (i) facet Property name Di vi si on * Tag name Attribute Value ID apex:column id Adjust to the width of description - Width [px] apex:column width Header name apex:column headervalue Header name apex:facet name header Font Color apex:column style color Header align [horizontal] - Limitations or points of caution Read without metric unit or in pixel only. Otherwise the setting value will be deleted and show WARN warning message. The child element s <apex:facet name="header">***</apex:fac et> tag will be prioritized if it exisits, and delete the setting value. WARN wanrning message will show.

46 Align Horizontal apex:column style text-align Align Vertical apex:column style vertical-align - apex:column breakbefore - apex:column colspan - apex:column dir - apex:column footerclass - apex:column footervalue - apex:column headerclass - apex:column lang - apex:column onclick - apex:column ondblclick - apex:column onkeydown - apex:column onkeypress - apex:column onkeyup - apex:column onmousedown - apex:column onmousemove - apex:column onmouseout - apex:column onmouseover - apex:column onmouseup - W apex:column rendered - apex:column rowspan - apex:column styleclass - apex:column title

47 2 <apex:pageblocktable> Di vi Property name si on * Tag name Attribute Wrapper ID - ID apex:pageblocktable Id Object Label Name Var Reference Item Label Name Valu e Limitations or points of caution Set as SkyVisualEditor s default value. Pages will be imported as standard Controller s object (Tables without relations) if it matches with all of the conditions below. Reference API name for reference -if <apex:page> tag apex:pageblocktable Value item recordsetvar attribute exists. -if <apex:page> tag extensions attribute does not exist. -if <apex:datatable> tag value and <apex:page> tag recordsetvar match. - apex:pageblocktable Value Adjust row height Header row height [px] Detail row height [px] Number of columns Maximum number of records apex:pageblocktable rows Set Output Tag Fix PageBlock Table Fix Header Show Record Counts - Paging is available -

48 Show number of Pages - Add Row Button is available - Edit the value of Add Row Button - Add Row Button Value - Set the number of rows to add - Initial number of rows to add - Delete row button is available - Edit the value of Delete Button - Delete Button Value - Bulk Edit - Bulk Edit Button Value - Bulk Edit Value - Select Delete - Edit the value of Select Delete Button - Select Delete Button Value - Clone Row Button is available - Edit Clone Row Button is available - Clone Button Value - Show Table message - テーブルメッセージ設定 - Release required Item - Filter condition - Lookup Item - Select Custom LookUp screen - Parameter Edit value of Acquire Master Button Acquire Master Button Value JavaScript Object Item additional acquisition Show Conditions apex:pageblocktable rendered StyleClass apex:pageblocktable styleclass W apex:pageblocktable columns Number of columns is set by SkyVisualEditor. Setting values will be deleted and show WARN

49 warning message. - apex:pageblocktable align - apex:pageblocktable border - apex:pageblocktable captionclass - apex:pageblocktable captionstyle - apex:pageblocktable cellpadding - apex:pageblocktable cellspacing - apex:pageblocktable columnclasses - W apex:pageblocktable columnswidth - apex:pageblocktable dir - apex:pageblocktable first - apex:pageblocktable footerclass - apex:pageblocktable frame - apex:pageblocktable headerclass - apex:pageblocktable lang - apex:pageblocktable onclick - apex:pageblocktable ondblclick - apex:pageblocktable onkeydown - apex:pageblocktable onkeypress - apex:pageblocktable onkeyup - apex:pageblocktable onmousedown - apex:pageblocktable onmousemove - apex:pageblocktable onmouseout - apex:pageblocktable onmouseover - apex:pageblocktable onmouseup - apex:pageblocktable onrowclick - apex:pageblocktable onrowdblclick - apex:pageblocktable onrowmousedown - apex:pageblocktable onrowmousemove - apex:pageblocktable onrowmouseout - apex:pageblocktable onrowmouseover - apex:pageblocktable onrowmouseup - apex:pageblocktable rowclasses - apex:pageblocktable rules - apex:pageblocktable style - apex:pageblocktable summary - apex:pageblocktable title

50 - apex:pageblocktable value - W apex:pageblocktable var - apex:pageblocktable width Set as SkyVisualEditor s default value. Setting value will be deleted and show WARN warning message.

51 (i) facet Property name Di vi si Tag name Attribute Value Limitations or points of caution on * ID apex:column Id Header Mode If the header name exists and no direct input, it will be set as Show Label. Header Name apex:column headervalue If child element of <apex:facet name="header">***</apex:facet> exists, the Header Mode described above will be prioritized. The setting value will be deleted and show WARN warning message. Header Name apex:facet name header Font Color apex:column Style color Header Align [horizontal] - Align Horizontal apex:column Style text-align Align Vertical apex:column Style vertical-align - apex:column breakbefore - apex:column colspan - apex:column Dir - apex:column footerclass - apex:column footervalue - apex:column headerclass - apex:column Lang - apex:column onclick - apex:column ondblclick - apex:column onkeydown - apex:column onkeypress - apex:column onkeyup - apex:column onmousedown - apex:column onmousemove - apex:column onmouseout - apex:column onmouseover

52 - apex:column onmouseup - W apex:column rendered - apex:column rowspan - apex:column styleclass - apex:column Title - apex:column width x. RelatedList Property name Di vi si on * Tag name Attribute Value ID apex:relatedlist id Reference API name for object - Object Label Name - Child relation name apex:relatedlist list Number of rows apex:relatedlist page Size Edit Title - Title apex:relatedlist title - apex:relatedlist rendered - apex:relatedlist subject Limitations or points of caution

53 xi. ChatterFeed Di Property name vis io Tag name Attribute Valu e Limitations or points of caution n* ID chatter:feedwithfollowers id chatter:feed id Set Height - Height [px] - Show followers Show Header chatter:feedwithfollowers showheader - chatter:feedwithfollowers oncomplete - chatter:feedwithfollowers rendered - chatter:feedwithfollowers rerender The standard feature of SkyVisualEditor is used, which - W chatter:feedwithfollowers entityid will delete the setting values and show WARN warning message. - chatter:feed showpublisher - chatter:feed oncomplete - chatter:feed rendered - chatter:feed rerender The standard feature of SkyVisualEditor is used, which - W chatter:feed entityid will delete the setting values and show WARN warning message. - chatter:feed feeditemtype

54 xii. SaveButton Property name Di vi si on * Tag name Attribute Value ID apex:commandbutton id Edit Value - Value apex:commandbutton value Tooltip apex:commandbutton title Set width - - Width [px] apex:commandbutton style width Button Style - - Font Color apex:commandbutton style color Font Weight apex:commandbutton style font-weight StyleClass apex:commandbutton styleclass - apex:commandbutton accesskey - W apex:commandbutton action - apex:commandbutton alt - apex:commandbutton dir - apex:commandbutton disabled - apex:commandbutton image - apex:commandbutton immediate - apex:commandbutton lang - apex:commandbutton onblur - apex:commandbutton onclick - apex:commandbutton oncomplete - apex:commandbutton ondblclick - apex:commandbutton onfocus - apex:commandbutton onkeydown - apex:commandbutton onkeypress - apex:commandbutton onkeyup - apex:commandbutton onmousedown Limitations or points of caution Metric unit will be in pixel. Otherwise it will be read as Additional Styles. action="{!save}" will be saved as SaveButton.

55 - apex:commandbutton onmousemove - apex:commandbutton onmouseout - apex:commandbutton onmouseover - apex:commandbutton onmouseup - W apex:commandbutton rendered - apex:commandbutton rerender - apex:commandbutton status - apex:commandbutton tabindex - apex:commandbutton timeout

56 xiii. EditButton Property name Di vi si on * Tag name Attribute Value ID apex:commandbutton Id Edit Value - - Value apex:commandbutton value Tooltip apex:commandbutton title Set width - - Width [px] apex:commandbutton style width Button Style - - Font Color apex:commandbutton style color Font Weight apex:commandbutton style font-weight StyleClass apex:commandbutton styleclass - apex:commandbutton accesskey - W apex:commandbutton action - apex:commandbutton Alt - apex:commandbutton Dir - apex:commandbutton disabled - apex:commandbutton image - apex:commandbutton immediate - apex:commandbutton lang - apex:commandbutton onblur - apex:commandbutton onclick - apex:commandbutton oncomplete - apex:commandbutton ondblclick - apex:commandbutton onfocus - apex:commandbutton onkeydown - apex:commandbutton onkeypress - apex:commandbutton onkeyup - apex:commandbutton onmousedown Limitations or points of caution Metric unit will be in pixel. Otherwise it will be read as Additional Styles. action="{!edit}" will be read as EditButton.

57 - apex:commandbutton onmousemove - apex:commandbutton onmouseout - apex:commandbutton onmouseover - apex:commandbutton onmouseup - apex:commandbutton rendered - apex:commandbutton rerender - apex:commandbutton status - apex:commandbutton tabindex - apex:commandbutton timeout

58 xiv. CancelButton Property name Di vi si on * Tag name Attribute Value ID apex:commandbutton id Edit Value - - Value apex:commandbutton value Tooltip apex:commandbutton title Set width - - Width [px] apex:commandbutton style Width Button Style - - Font Color apex:commandbutton style Color Font Weight apex:commandbutton style font-weight Check Scree n - Edit Check Screen Message - - Check Screen Message - - StyleClass apex:commandbutton styleclass - apex:commandbutton accesskey - W apex:commandbutton action - apex:commandbutton alt - apex:commandbutton dir - apex:commandbutton disabled - apex:commandbutton image - apex:commandbutton immediate - apex:commandbutton lang - apex:commandbutton onblur - apex:commandbutton onclick - apex:commandbutton oncomplete Limitations or points of caution Metric unit will be in pixel. Otherwise it will be read as Additional Styles. action="{!cancel}" will be read as CancelButton.

59 - apex:commandbutton ondblclick - apex:commandbutton onfocus - apex:commandbutton onkeydown - apex:commandbutton onkeypress - apex:commandbutton onkeyup - apex:commandbutton onmousedown - apex:commandbutton onmousemove - apex:commandbutton onmouseout - apex:commandbutton onmouseover - apex:commandbutton onmouseup - W apex:commandbutton rendered - apex:commandbutton rerender - apex:commandbutton status - apex:commandbutton tabindex - apex:commandbutton timeout

60 xv. DeleteButton Property name Di vi si on * Tag name Attribute Value ID apex:commandbutton id Edit Value - - Value apex:commandbutton value Tooltip apex:commandbutton title Set width - - Width[px] apex:commandbutton style width Button Style - - Font Color apex:commandbutton style color Font Weight apex:commandbutton style font-weight StyleClass apex:commandbutton styleclass - apex:commandbutton accesskey - W apex:commandbutton action - apex:commandbutton alt - apex:commandbutton dir - apex:commandbutton disabled - apex:commandbutton image - apex:commandbutton immediate - apex:commandbutton lang - apex:commandbutton onblur - apex:commandbutton onclick - apex:commandbutton oncomplete - apex:commandbutton ondblclick - apex:commandbutton onfocus - apex:commandbutton onkeydown - apex:commandbutton onkeypress - apex:commandbutton onkeyup - apex:commandbutton onmousedown Limitations or points of caution Metric unit will be in pixel. Otherwise it will be read as Additional Styles. action="{!delete}" will be read as DeleteButton

61 - apex:commandbutton onmousemove - apex:commandbutton onmouseout - apex:commandbutton onmouseover - apex:commandbutton onmouseup - W apex:commandbutton rendered - apex:commandbutton rerender - apex:commandbutton status - apex:commandbutton tabindex - apex:commandbutton timeout

62 xvi. CustomButton Property name Di vi si on * Tag name Attribute Value Wrapper ID - ID apex:commandbutton id Show Conditions apex:commandbutton rendered Value apex:commandbutton value Tooltip apex:commandbutton title Set width - - Width [px] apex:commandbutton style Width Button Style - - Font Color apex:commandbutton style Color Font Weight apex:commandbutton style font-weight Limitations or points of caution Metric unit will be in pixel. Otherwise it will be read as Additional Styles. Select Movement - Set Desitination - Open a link in a new window - OnClick apex:commandbutton onclick Action W apex:commandbutton action OnCompleate apex:commandbutton oncomplete Set Table Region StyleClass apex:commandbutton styleclass immediate apex:commandbutton immediate rerender apex:commandbutton rerender - apex:commandbutton accesskey - apex:commandbutton alt If the action is not Save/Edit/Cancel/D elete, it will be read as CustomButton.

63 - apex:commandbutton dir - apex:commandbutton disabled - apex:commandbutton image - apex:commandbutton lang - apex:commandbutton onblur - apex:commandbutton ondblclick - apex:commandbutton onfocus - apex:commandbutton onkeydown - apex:commandbutton onkeypress - apex:commandbutton onkeyup - apex:commandbutton onmousedown - apex:commandbutton onmousemove - apex:commandbutton onmouseout - apex:commandbutton onmouseover - apex:commandbutton onmouseup - W apex:commandbutton status - apex:commandbutton tabindex - apex:commandbutton timeout The standard feature of SkyVisualEditor is used, which will delete the setting values and show WARN warning message.

64 xvii. FreeText Property name Di vi si on * Tag name Attribute Value Wrapper ID - ID apex:outputtext Id Width [px] - Height [px] - Value apex:outputtext value apex:page Text Child Font Color apex:outputtext style color Font Size apex:outputtext style font-size Font Weight apex:outputtext style font-weight Underline apex:outputtext style text-decoration:underline Show Conditions apex:outputtext rendered StyleClass apex:outputtext styleclass - apex:outputtext Dir - W apex:outputtext escape - apex:outputtext label - apex:outputtext Lang - apex:outputtext Title Limitations or points of caution If the page has child element (such as <apex:param >), it will not be converted to components. It will import <apex:outputtext> as CodeBlock. Text child element directly under the page tags will be converted as FreeText components. Available only for Underline. Otherwise they will be read as Additional Styles.

65 xviii. BlankSpace Property name Divisio n* Tag name Attribut e Value Limitations or points of caution - apex:outputpanel - <apex:outputpanel ></apex:outputpanel> will be read as BlankSpace within Page Block Section. xix. CustomLink Di Property name vi si Tag name Attribute Value Limitations or points of caution on * Wrapper ID - ID apex:commandlink id Show Conditions apex:commandlink rendered apex:commandlink value Line breaks and tabs if a Text Child will be Value apex:commandlink Text Child replaced to space and read it as value + child text. (Child Text will be deleted) Font Color apex:commandlink style color Font Size apex:commandlink style font-size Font Weight apex:commandlink style font-weight Align Horizontal - Select Movement - Set Destination Open a link in a new window - - OnClick apex:commandlink onclick action W apex:commandlink action OnComplete apex:commandlink oncomplete

66 - Set Table Region StyleClass apex:commandlink styleclass - apex:commandlink accesskey - apex:commandlink charset - apex:commandlink coords - apex:commandlink dir - apex:commandlink hreflang - apex:commandlink immediate - apex:commandlink lang - apex:commandlink onblur - apex:commandlink oncomplete - apex:commandlink ondblclick - apex:commandlink onfocus - apex:commandlink onkeydown - apex:commandlink onkeypress - apex:commandlink onkeyup - apex:commandlink onmousedown - apex:commandlink onmousemove - apex:commandlink onmouseout - apex:commandlink onmouseover - apex:commandlink onmouseup - apex:commandlink rel - apex:commandlink rerender - apex:commandlink rev - apex:commandlink shape - apex:commandlink status - apex:commandlink tabindex - apex:commandlink target - apex:commandlink timeout - apex:commandlink title - apex:commandlink type

67 xx. Image Property name Di vi si Tag name Attribute Value Limitations or points of caution on * Wrapper ID - ID apex:image Id Img Id Show apex:image Rendered Conditions Img Rendered Image Source apex:image Value Read as select image from outside the Web Page Img Src Read without metric unit or in pixel only. Width [px] apex:image Width Otherwise the setting value will be deleted and show WARN warning message. Img Style width Read without metric unit or in pixel only. Height [px] apex:image Height Otherwise the setting value will be deleted and show WARN warning message. Img Style height Align Horizontal - Aspect Ratio - JavaScript apex:image Onclick JavaScript apex:image ondblclick JavaScript apex:image onkeydown JavaScript apex:image onkeypress JavaScript apex:image Onkeyup JavaScript apex:image onmousedown JavaScript apex:image onmousemove JavaScript apex:image onmouseout JavaScript apex:image onmouseover JavaScript apex:image onmouseup JavaScript Img Onclick JavaScript Img ondblclick

68 JavaScript Img onkeydown JavaScript Img onkeypress JavaScript Img Onkeyup JavaScript Img onmousedown JavaScript Img onmousemove JavaScript Img onmouseout JavaScript Img onmouseover JavaScript Img onmouseup StyleClass apex:image styleclass - apex:image Alt - apex:image Dir - apex:image Ismap - apex:image Lang - apex:image Longdesc - apex:image Style - apex:image Title - apex:image url - apex:image Usemap - apex:image Style - apex:image Title

69 (3) facet import examples of DataTable Component <apex:datatable> tag and <apex:pageblocktable> tag will be imported as DataTable component. Child elements that can be imported as facet are as below: [Import pattern for header] apex:column attribute value Example: <apex:column value="{!item.reason}" /> apex:column attribute headervalue Example: <apex:column value="{!item.priority}" headervalue="priority"/> apex:facet name= header child element Example: <apex:facet name="header">name</apex:facet> <apex:facet name="header"> <apex:outputtext value="{!$objecttype.case.fields.createddate.label}" /> </apex:facet> [Import pattern for value] apex:column attribute value Example: <apex:column value="{!item.reason}" /> apex:column text child element Example: <apex:column headervalue="case Number"> {!item.casenumber} </apex:column> apex:column child element Example: <apex:column headervalue="casenumber"> <apex:outputfield value="{!item.createddate}" /> </apex:column>