SkyVisualEditor Default AppComponent Package User Manual Ver 2.19.0 December 17 th, 2017 TerraSky co., Ltd. Page 1 of 29
Table of Contents 1. Preface... 4 2. Notice... 4 (1) Conditions of Use... 4 (2) Request to the customer... 4 (3) Trademarks... 4 (4) Support Policy... 4 3. SkyVisualEditor Package... 5 (1) Package Installation... 5 (2) Editable Picklist... 6 a. Display in the studio... 7 b. Place the component... 7 i. Set the component properties... 9 ii. Using the component in Salesforce... 11 iii. When used as a standard feature... 14 c. Limitations,Specification... 14 i. Upper case and lower case characters will not be distinguished when saving Select List... 14 ii. The value that you put in input fields will be added to Obsolete Value when applying this function to the Select List... 14 (3) Address Autocomplete [Japanese Only]... 15 (4) Chatter Feed... 16 a. In the Studio... 16 b. Placing the component... 16 i. Component Properties... 17 (5) Embed Visualforce page... 18 a. Display component in the Studio... 19 b. Place the component... 19 i. Property setting for the component... 20 (6) PDF Page Break... 21 a. Display component in the Studio... 21 b. Place the component... 22 i. Property setting for the component... 22 Page 2 of 29
(7) Attachments Upload... 23 a. Presetting for the Salesforce Object... 24 b. Show component in the Studio... 24 c. Placing the Component... 25 i. Component Property Setting... 25 d. Limitation... 26 (8) Validation... 27 a. Show component in the Studio... 27 b. Placing the component... 28 i. Component Property Setting... 28 Page 3 of 29
1. Preface This document covers information related to using the SkyVisualEditor API to create AppComponents to be used in SkyVisualEditor. AppComponents also make use of Visualforce Pages and Apex classes. For more information about these please refer to documentation from Salesforce. 2. Notice (1) Conditions of Use You may only make use of the functionality listed in this manual if you satisfy one of the following conditions. You have contracted to use license(s) of SkyVisualEditor You are evaluating SkyVisualEditor during the 30 day trial (2) 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. 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. (3) Trademarks TerraSky, the TerraSky logo, SkyVisualEditor and the SkyVisualEditor logo are registered trademarks of TerraSky co., Ltd. Salesforce.com, AppExchange and the no software logo 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. (4) Support Policy The functionality listed in this manual is considered an official functionality of SkyVisualEditor and is supported the same as internal SkyVisualEditor functionality. Page 4 of 29
3. SkyVisualEditor Package This is the SkyVisualEditor default AppComponent Package. We will release new officially supported AppComponents in this package. Currently this package contains the following AppComponents No AppComponent Name 1 Editable Picklist 2 Address Autocomplete [Japanese Only] 3 Chatter Feed 4 Embed Visualforce page 5 PDF Page Break 6 Attachments Upload 7 Validation (1) Package Installation Please install the package from the appropriate URL below. Version:2.19(As of 2017/12/17) For Production Environment (Production / Developer Edition ) https://login.salesforce.com/packaging/installpackage.apexp?p0=04t0h000000xo3g For Sandbox Environment https://test.salesforce.com/packaging/installpackage.apexp?p0=04t0h000000xo3g Page 5 of 29
(2) Editable Picklist The Salesforce Picklist field is displayed as a combo box in which you can select a value from a predefined list. However, there are occasions when the available options are insufficient, and the user needs to select a value not available in the list. With the Editable Picklist functionality it is possible to display the predefined list and also allow the input of new values. In addition it is possible to define values on a per page level. [Picklist Field] [Editable Picklist Field] Page 6 of 29
a. Display in the studio After installing the package, login to SkyVisualEditor Studio. You can make use of the Editable Picklist from the Editable Picklist option under SkyVisualEditor in the AppComponent section of the Component Pane. b. Place the component The Editable Picklist AppComponent can be placed as follows: Layout Placeable Regions Salesforce layout On the canvas Free layout On the canvas This particular AppComponent will not have an impact on the screen after deployment, but we recommend to place it at the bottom of the page so as not to get in the way while creating your pages. Page 7 of 29
Page 8 of 29 SkyVisualEditor
i. Set the component properties Click on the icon in the canvas to bring up the Component Property dialog. Req? Name Description ID Reading Order The internal component ID to SkyVisualEditor Studio Set the order in which each AppComponent is Page 9 of 29
processed. '--None--' display '--None--' edit Direct edit Target ItemID List Values It is possible that the order of execution of the JavaScript from the various AppComponents on the page will impact the functionality. (Example: The same library is included at different versions from multiple AppComponents). This setting defines the order the AppComponents should be loaded on the page. Choose whether the value represented not yet set is displayed or not in the picklist. Default: checked Define what is shown to represent the not yet set value in the picklist. Default: '--None--' Allow users to input text in addition to selecting from predefined values in the combo box. Default: not checked The target field of this functionality. You can choose up to 10 fields at once. The following types can be used with this functionality. Picklist Text *You can select fields of other types but doing so will result in incorrect behavior so please refrain. Define the values in the combo box of the above target. You cannot add or edit to values defined in Salesforce and if this property is used, predefined values in Salesforce will be completely ignored. If a target is set but the values for that target are not, the values defined in Salesforce will be used by default. Page 10 of 29
ii. Using the component in Salesforce 1 When used as a field of the main object The Salesforce default picklist is shown in Combo Box format with the options pulled from the field s settings. The option "--None--" is displayed. Not editable --None-- is shown Options are as defined in the field By making use of this AppComponent, you will be able to: Directly input values as well as show a combo box Define different options per page Customize the not set value of "--None--" Hide the not set value of "--None--" Editable --None-- is changed to --Not select-- Freely set values Page 11 of 29
2 When used as a related Object It is also possible to use this functionality for fields of related objects in a table. When doing so, it is necessary to add one line of JavaScript to the properties of the related object table. Add the following line to the Table s Script editor. If you do not add this line, the settings will not be applied to your table once you deploy the page to Salesforce. ChangeSelectList.changeSelectinTable(); Page 12 of 29
Upon deploying, the Salesforce screen will appear like the below. input Changed --None--" to --Not select--" Add options freely Page 13 of 29
iii. When used as a standard feature There may be a case where operations are influenced by the property values set in the Studio screen, as you are adding functions to components in the Studio. Upon settings, please note the followings: 1 When setting default value in a picklist field When you set default in a picklist field in Salesforce standard feature, and then set a list of values for the picklist value of this feature, default value + picklist value will appear in a picklist. 2 When Show None in the picklist properties is checked off By unchecking Show None in the picklist properties, None-- will be hidden from the list. When None-- is hidden, the top value in predefined list will appear by default. Therefore the top value in the list + picklist value will appear in a picklist. c. Limitations,Specification i. Upper case and lower case characters will not be distinguished when saving Select List In the Salesforce Select List, uppercase and lower case characters and other characters including double-digits (e.g. Katakana) will not be distinguished. Therefore, if there are AAA and aaa on the list, saving aaa may be recognized as AAA. Please see the below for more information. ii. The value that you put in input fields will be added to Obsolete Value when applying this function to the Select List The Value in the Select List will be added to Obsolete Values when saving after selecting or directly editing values on the page that you deploy from the Studio. If the values are already set in the Select List, they will not be added multiple times. You need to replace the obsolete value to the active value in order to delete obsolete values also the values that you utilized through this function will not be saved. Page 14 of 29
(3) Address Autocomplete [Japanese Only] This AppComponent takes the first 3 digits of a Japanese zip code and automatically looks up the remaining information and populations various address fields. For more information, please refer to the Japanese documentation. Note this functionality only works for Japan. Page 15 of 29
(4) Chatter Feed Display a Chatter Feed of things the current user is following. a. In the Studio After installing the package you will see the Chatter Feed icon in the AppComponent section of the components panel. b. Placing the component The Chatter Feed AppComponent can be placed as follows. Layout Usable Locations Dashboard Layout On the canvas In the flexible panel In a panel grid In a tab Studio Screen Page 16 of 29
It will appear that you can resize the component in the studio but Salesforce will not respect those sizing settings once your dashboard page is deployed. This component will take the width of its container and will be as long as the number of elements displayed. i. Component Properties Click on the component to view the properties. Name Details ID Rendered ID used within SkyVisualEditor Display the component true: Display false: Hide Page 17 of 29
(5) Embed Visualforce page This AppComponent can embed Visualforce pages (coded or created by SkyVisualEditor). This AppComponent will insert the Visualforce tag <apex:include>. Therefore, an error may occur if there is a conflict between the original page's JavaScript or CSS and that of the embedded page. Please see the Visualforce Developer Guide for details on <apex:include> https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_include.htm Page 18 of 29
a. Display component in the Studio Log in to the SkyVisualEditor after installing the package. You will be ready to go if there is an icon Embed Visualforce Page on the AppComponent pane. b. Place the component You can place the Embed Visualforce Page AppComponent in the area below. Layout area Salesforce Layout Outside of form area Dashboard Layout Inside the FlexiblePanel Studio Page You can use mouse to change the size of the component but please be aware that it will not update the property setting. This is suggested to use for checking the overall page design. Page 19 of 29
i. Property setting for the component Click on the component to open its property setting. Name Required Description ID Component ID defined in the SkyVisualEditor Width The width of the Visualforce page embedded on to the Salesforce page. You can either set the size as a Fixed value (in px ) or as a Percentage value (in % ). A scroll down bar will show for the Fixed Value setting if the page size is too large. Default value:400px Height The height of the Visualforce page embedded on to the Salesforce page. You can either set the size as a Fixed value (in px ) or as a Percentage value (in % ). A scroll down bar will show for the Fixed Value setting if the page size is too large. Default value: 300px Visualforce page Set Visualforce page name rendered Set a rendered attribute value for the embedded Visualforce page to control how it will be displayed. The variables can be selected from true, false (not set) or Merge field. Page 20 of 29
(6) PDF Page Break This is a component to make a Page Break in PDF pages. This AppComponent is supported only for PDF pages created in Salesforce Layout. Pease enable Create PDF feature before using this AppComponent. a. Display component in the Studio Login to SkyVisualEditor Studio after installing the package. You are ready to go if you see a PDF Page Break Icon in the AppComponent pane. Page 21 of 29
b. Place the component You can place the Embed Visualforce Page AppComponent in the area below. Layout Salesforce Layout area On the canvas In the PageBlock Studio Page You can adjust the width and the height of the Component by mouse but the size value will not be saved on to the property configuration. Please use it as a guidance when you create the page layout. i. Property setting for the component Click on the component to open its property setting. Name Required Description ID Component ID defined in the SkyVisualEditor Page 22 of 29
(7) Attachments Upload You can drag and drop attachments on to the View or Edit Record Page. The width size of the drag zone will be 100% of the screen. Once the file is dropped in the area, its thumbnail image will appear which indicates that the file have been saved into Attachment File Object. [Before the file is uploaded] [After the file is uploaded] *The thumbnail image of the uploaded image file will appear (the first image of the picture above) Following images that describes the upload status (success or fail) will appear after the upload. Upload Success A check mark will appear. (immediately after the upload) Upload Success The check mark indicating the successful upload will fade out. The thumbnail image of the uploaded image file will show. For files other than image files, its file name and the size will show. Upload Failed A cross mark will appear. Page 23 of 29
a. Presetting for the Salesforce Object To use this AppComponent, you will need to add Salesforce Organization URL to the White List in the Cross-Origin Resource Sharing. This is because Salesforce API is used to upload the files. Setup -> Administer -> Security Controls -> CORS Input Format: https://[mydomain].[instance].visual.force.com b. Show component in the Studio Login to SkyVisualEditor Studio after installing the package. You are ready to go if you see Attachments Upload Icon in the AppComponent pane. Page 24 of 29
c. Placing the Component You can place the Upload Attachment component in the following area. Layout Salesforce Layout Area -Under the Canvas -Within Page Block -Within Panel Grid -Within Tab Panel [Studio] You can adjust the component size by mouse. Please be aware that the adjusted size will not be saved in the Property setting. The component s width size will always be 100% of the page width. i. Component Property Setting Component Property will show on the right hand side of the Studio when the component is clicked. Name Required Description ID Component ID defined in the SkyVisualEditor Max file size[mb] Set the attachment size limit. Select from 1MB to 10MB. Default is 5MB Page 25 of 29
d. Limitation This component is supported with Classic UI only. Please note that if you use this component in Lightning Experience file upload will fail. Page 26 of 29
(8) Validation When the cursor leaves the input field, it will check the value for validation. An error message popup will appear if the value is invalid. The validation check will include string checking which is provided as a standard feature, and also a Custom rule checking by creating a dictionary. The error message pop-up can be hidden by typing the valid value or by clicking the pop-up. a. Show component in the Studio Login to SkyVisualEditor Studio after installing the package. You are ready to go if you see a Validation Icon in the AppComponent pane. Page 27 of 29
b. Placing the component You can place the Validation component in the following area. Layout Salesforce Layout Free Layout Area Under the Canvas Under the Canvas [Studio] i. Component Property Setting Component Property will show on the right hand side of the Studio when the component is clicked. Page 28 of 29
Name Required Description ID Component ID defined in SkyVisualEditor Reading Order Set the running order of AppComponent processing. Validation Rule Select the Validation Rule from the following: -Required Error Message:This field is required -Phone Error Message:Invalid phone number -Email Error Message:Invalid email address -Numeral Error Message:Invalid floating decimal number -LetterNumber Error Message:No special characters allowed -Url Error Message:Invalid URL -Japanese Only-Katakana Error Message:Please input Japanese Katakana -Japanese Only-Hankakukana Error Message:Please input Japanese Hankaku Katakana -Custom Rules TargetField 1-10 Select the Input Field to set the Validation Rule. CustomRule (Regular expressions) Use this property if the Validation Rule is set as Custom Rule. The property setting will not be in effect if the setting is other than the Custom Rule. You can create a custom dictionary to run the checking. CustomRule Message This message will appear when there is an error in the Custom Rule (Regular Expressions). Page 29 of 29