# Release Notes - v1.4.0 ## ![](https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/plateau-studio/party-horn.svg) New Features - **Plateau Studio Documentation** is ready for you to discover. To check out the detailed source about how to use Plateau Studio starting with Creating New Account to Creating UI Screens, Workflows and Publish within Plateau Studio, click [here](https://studio.onplateau.com/docs/ui) You can also reach out to our monthly **Release Notes** in this document to catch up with our new features and improvements. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.3.0/docusaurus.png" width="640"/> - **StudioApps** is now available on the **Google Play Store** for **Android** devices. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.3.0/StudioAppAndroid.png" width="640"/> - **Styled Component** model is now available to save the styles given from the style tab on the component and use it on other pages or the page you are on added by using **Create or Select a Styled Component**. With this method, you can create a component faster with the same style. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/styleComponent1.gif" width="640"/> - You can see the created from the **Styled Components** file on the left. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/styledComponent2.png" width="640"/> - You can click the **Edit Styled Components** button or the **Styled Components file** on the left to edit the styled component you saved. When you make changes and save, you can see that the components with that styled component have changed. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/styleComponent3.gif" width="640"/> - You can replace a component saved as a styled component with another one. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/styleComponent4.gif" width="640"/> - To cancel a syled component, click the **Detach Styled Component** button. Your styled component is not deleted. You just separate the component you use from the styled component. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/styleComponent5.png" width="640"/> <br/> - **Plateau UI Standalone to Plateau Studio transfer document** is available on Plateau Studio Docs. (LINK). With the help of this document, you can easily transfer your ongoing projects' developed on Plateau UI standalone (http://studio.onplateau.com/quick) address to Plateau Studio. - **Start Working / Stop Working** is being used for Check in/ Check out to provide you better user experience. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.3.0/StartWorking.png" width="640"/> <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.3.0/StopWorking.png" width="640"/> - You can also see who is currently working on the page with **UserName is working on this page**. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/UserNameworking.png" width="640"/> - **Expanding UI Editor** feature is now available. You can expand your UI Editor area and close the Explorer Tree. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.3.0/ExpandUI.png" width="640"/> - **Application logo** feature added. You can select one from the sample logos or upload a logo of your choice. The logo that you select will appear also in StudioApps. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.3.0/AppImage.png" width="640"/> <br /> - **Loading animation of Plateau Logo** for all loading pages updated. - **New loading screen** developed to display while waiting for creating an organization. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.3.0/loading-with-info.gif" width="640"/> <br /> - **Cookie Acceptation** dialog added to login page. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.3.0/cookie-dialog.png" width="640"/> <br/> - **Publishing and exporting the releasable (major) versions of the models** provided. While performing **Stop Working**, models that are selected as **Ready to Publish** are listed on Export and Publish steps. Non-versioned models not added to generated packages. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.3.0/major-version-publish.png" width="640"/> - When deleting the application, the environment created during Plateau publish is now being deleted. - **Naming the relations** feature in Data Module added when creating relations. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/v.1.3/entity.PNG" width="640"/> #### **UI Module** - Custom Component, Messaging Component and Quick Components' names changed. - **Custom Component** → **BlockComponent** - **Messaging** → **PageComponent** - QLabel → Label - QLegend → Legend - QCaptcha → Captcha - QQRCode → QRCode - QRichText → RichText - QDynamicFields → DynamicFields - QDocumentViewer → DocumentViewer - QFrame → Frame - QImgZoom → ImgZoom - QPhoneInput → PhoneInput - QQrReader → QrReader - QReCaptcha → ReCaptcha - QVideo → Video - QLightBox → LightBox - QMap → Map - QTableCell → TableCell - QTutorial → Tutorial - QMenu → Menu - QTimer → Timer - QIdleTimer → IdleTimer - **OTP component**, which allows for the creation and management of One-Time Passwords (OTP) added. This component supports navigation between inputs using the Tab, Delete, and Arrow keys. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/QOtpComp.gif" width="640"/> **Props** | Props Name | Type | Description | | ------------ | --------- | ------------------------------------------------------------ | | length | `Number` | Sets the desired length of the OTP. Default value is 4. | | disabled | `Boolean` | Disables the OTP inputs. Default value is `false` | | type | `String` | Sets the type of the OTP inputs. Default value is "text". ['number', 'text', 'password'] | | qValue | `Array` | Sets the value of the OTP. | | preventPaste | `Boolean` | Determines whether to allow pasting into the OTP inputs. Default value is `true` (allows paste). | | width | `String` | Sets the width of the OTP inputs. | | height | `String` | Sets the height of the OTP inputs. | | readonly | `Boolean` | Determines whether the OTP inputs should be read-only. | | error | `Boolean` | Enables or disables error of the OTP. Default value is `false` (error disabled). | | errorLabel | `String` | Sets the label text to be displayed for errors. | | customClass | `String` | Sets the name of the custom CSS class to be applied to the OTP inputs. | **Events** | Events Name | Description | | ----------- | ------------------------------------------------------------ | | input | Triggered for each character input in the OTP. Returns the concatenated string value of the inputs as a parameter. | | finish | Triggered when all OTP inputs are completed. Returns the completed OTP string value as a parameter. | | blur | Triggered when a click occurs outside the OTP component and after the first input has been made. Returns the concatenated string value of the inputs as a parameter. | - **VCalendar** component which used to to display information in a daily, weekly, monthly, or category view added to create an example with its default values. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/vcalendar.gif" width="640"/> - **turkishIban** format type added on **VTextfield** component to use turkish format iban type for prefixed fields. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/turkishIban.gif" width="640"/> - **reset** method added to ReCaptcha component. Method resets the Google reCAPTCHA widget. >components.myReCaptcha.reset(); - The Preview Mode state of the current qjson is now holding. When a qjson is selected, it opens with the mode (Preview or Edit Mode) as it was left. - **New masking type** added to the VTextField component. It provides input masking for Turkish phones with country code. You can select from the format prop with the name: **turkishPhoneWithCountryCode**. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.3.0/phone-masking.gif" width="640"/> - Default value of VContainer component class changed to 'container' and old default value 'container--fluid' added as prop options. - **noGutters property** added to VRow and VCol components for removing deafult margin-padding. - **Case sensitive settings** written for button and tab components in the Editor added by default to these components. - Layout area updated. Align and justify have been swapped depending on the direction. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.3.0/layout.gif" width="640"/> - **VMenu component** now comes with a default template when added to the page. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.3.0/VMenuTemplate.gif" width="640"/> <br /> - **line-height** property added under the style tab of Label component. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.3.0/line-height.png" width="640"/> <br /> - **Style values** added to search result of page search. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/Style_SearchInPage.PNG" width="640"/> - **tooltipLabel(context)** event added to Charts component. Returns text to render for an individual item in the tooltip. The label can change the text that displays for a given data point. >quick.return(context.formattedValue + " - " + context.label); <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/DoughnutChart_tooltipLabel.png" width="640"/> - **loading.show()** and **loading.hide()** methods added. This allows loading to be displayed and closed. >quick.Quick.loading.show(); >quick.Quick.loading.hide(); - **Render block() and resume()** methods added. With these methods, you can pause Rendering of the page, and resume it whenever desired. In the PreRender event of the PageComponent, you might want to pause rendering until receiving the response of a service call. For example, to use a service response data on the Block Component's onLoad event, you can delay rendering of the page, until the service response is received. Thus, resulting Block Component's onLoad to fire after service's response. ```js PageComponent.PreRender quick.Quick.render.block(); // service call (or trigger a func to call a service) Service Call OnSuccess && OnFail quick.Quick.render.resume(); ``` - Format information for amount fields added to **exportToXlsx()** method. >let listItems = [ > { > amount: 0, > }, > { > amount: 730.00, > }, > { > amount: 22819.80, > } > ]; > let headersItems: IExcelHeader[] = [ > { text: "Tutar", value: "amount", cellOptions: { type: ExcelCellType.number, numberFormat: "##,#0.00" } }, > ]; > quick.Quick.exportToXlsx({ fileName: "mySampleExcel", items: listItems, headers: headersItems }); - **getIamToken()** method added to get iam token information. > async function getIamToken() { > let iamToken = await quick.Quick.authentication.getIamToken(); > } > getIamToken(); - **onRowClick(event)** event added to DxDataGrid component. - **Alignment** added on **VRow's** props tab as class ('align-start', 'align-center', 'align-end') and **VCol's** props tab as class ('align-self-start', 'align-self-center', 'align-self-end'). <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/Row_Col_Alignment.gif" width="640"/> - **The Geolocation interface** created and it represents an object able to obtain the position of the device programmatically. It gives Web content access to the location of the device. This allows a website or app to offer customized results based on the user's location. getCurrentPosition() method is used to get the current position of the device. > quick.Quick.getCurrentPosition(): ILocationPosition > > > > async function getCurrentPosition() { > > let location = await quick.Quick.getCurrentPosition(); > > quick.EM.trace("currentPosition"); > > if(location.isSuccess){ > > let positionSuccess = location.positionSuccess; > > let latitude = positionSuccess.coords.latitude; > > let longitude = positionSuccess.coords.longitude; > > } > > else { > > let positionError = location.positionError; > > let errorCode = positionError.code; > > let errorMessage = positionError.message; > > } > > } > > getCurrentPosition(); > > - **Column fitting feature** added to the exportToExcel method. Excel column widths are arranged by the content. **Before / After** <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.3.0/excel.PNG" width="320"/> <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.3.0/excel2.PNG" heigth="200" width="320"/> - **Block Components'(Custom Components') Sub Props** are now able to be set from the parent page like any other prop using: ```js (<any>components.CustomCompName).subPropName = "value-to-be-set" ``` - **Event parameter** now added and visible next to the event name when clicking Typscript (TS) button in component's Event tab. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/monaco_shell_event_name_parameter.png" width="640"/> ### **Plateau Mobile** **iOS** - Style props for **DocumentViewer, VDialog, VNavigationDrawer, VMenu** added. - Style props for **VAlert, VSlider** updated. - Firebase integration added for crash management. - **CopyToClipBoard** feature added. You can copy and paste a content in mobile. - VChipGroup component developed. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/IosChipGroup.gif" width="320"/> - Border style feature added for components. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/IosBorder.jpeg" width="320"/> - Style props for **VStepper** added. - textOverflow, whiteSpace, maxWidth props added to **Label component**. - Resolution of **px, em, rem, percent(%)** values in size properties is provided. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/IosDimensions.jpeg" width="320"/> - The on/off feature of the **Loading** function has been added to the engine side. - **New fonts** that added to UI Editor are now available for mobile. **Android** - Style props for **VSlideGroup, PageComponent, VRadioGroup, VMenu** added. - **CopyToClipBoard** feature added. You can copy and paste a content in mobile. - Border style feature added for components. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/AndroidBorder.png" width="320"/> - The on/off feature of the **Loading** function has been added to the engine side. - **New fonts** that added to UI Editor are now available for mobile. ## ![](https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-studio-common/plateau-studio/bugs.svg) **Bug Fixes** - Fixed the issue when changing the preview mode, save button and the modified icon is active even though the page does not have any changes. - Resolved an issue regarding Live Preview not working when adding a settings file to the application. ### **UI Module** - **Two-Way Binding** structure fixed. A common requirement when working with data is to bind it to a specific location and update dependent fields whenever changes occur. The **Quick.bind** system can be utilized for this purpose. To use Quick.bind, declare it in the PreRender stage and **store** the bound object. Additionally, specify the bound fields as a string array in the second parameter. - In Qjson requests, the header information defined in settings.yaml file removed. Therefore, unused header additions will not be added in Qjson requests. - Microsoft font weight list fixed with the following: - 400, 600 and 800 weights in Arial type - 100, 400. 500, 700 and 800 weights in Segoe UI type <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.3.0/microsoftFonts.gif" width="640"/> - Issue occured when selecting more than two breakpoints fixed. Now, you can select a breakpoint with a maximum of 4 separations. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.3.0/BPChanges.gif" width="640"/> - Layout multiplexing to get responsive display fixed. - Default margin and padding values (for VContainer, VCol, VRow and VBtn) are now displayed in Style Editor. - VBtnToggle style color changes fixed. - VBtnToggle-VBtn border style changes fixed. - Bug causes component highlight not to work properly on editor fixed. - Issue regarding error pop-up window not closing in Preview Mode once opened in Edit Mode resolved. - Bug causes displaying function descriptions even after they are unnecessary fixed. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/intellisense-visibility-error.png" width="640"/> - Not working layout style properties in the Tooltip component fixed. - Not working the style properties of the dialog component fixed. > quick.Quick.bind({ bindedObject: "store", fields: ["testField"] }); <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/TwoWay_Binding.gif" width="640"/> - Using **MM.trigger()** fixed in the PreRender event of the PageComponent. - Bug in the **component's drop area** fixed. When dropping a component, the drop area wasn't located correctly. You can now drop your components to the desired places. - Bug in the page intellisense is caused when a page is immediately open fixed. - Issue regarding the usage of align-items and justify-content properties on VCol component resolved. - Bug causes not using together loading show and hide methods in the same event fixed. - Bug causes not working main qjsons (like loading, pipeline) fixed. - Bug causes Breakpoint Slider Values not working properly fixed. - After clicking See Progress Details in Publish or Export steps, when switching between PublishJobs and Downloads tabs, the tab explanation above corrected based on the tab type. <img src="https://stechq.github.io/cdn/release/notes/plateau-studio/plateau-web/release-notes/v1.4.0/seeprogresdetailsdynamictext.gif" width="640"/> - The page opening error that occurred after upgrading Studio to the new version resolved. - The "ExecuteCommand Usage" error that appeared when opening certain applications fixed. - The problem where the page for entering user information was not being displayed after creating a new account fixed. - The visibility issue with service and application URLs created in the history table after publishing fixed. - Modules can now have unique names to avoid problems caused by creating modules with the same name. - An issue where a major version of the model was created while "stop working" even if the "to publishing" button was not selected in the opened modal resolved. - The UI Settings file versions not showing in the publish dialog tree fixed. - The publishing issue for the GCP environment caused by the blockage of UI Settings file resolved. <br></br> **iOS** - **Label font** issue when using bigger font size fixed. **Android** - VTextfield text align issue fixed by adding input text padding. - VSlider, VRangeSlider **change** and **click** events fixed. - VCarousel **change** event fixed. - **QDocumentViewer pdf format** fixed with more user-friendly and easy-to read formatting. - ProgressLinear align issue fixed with more proper ProgressLinear width size. - ProgressLinear color issue fixed. - VSlideItem background issue fixed by adding the option of creating round background shape.