To get started with Plateau Studio, simply create an account and sign in. Next, create your organization or join an existing one. This step is essential for unlocking the full capabilities of the Plateau Studio platform.
1
Define your app structure and styles for your theme by following the steps below befor starting to design your UI pages.
- Define Your App Pages:
Begin by determining the pages of your application. Decide whether to utilize Block Components or, if your project requires specialized components, Native Components. For more detailed information about Block Components, click See More; about Native Components, click See More.
- Create Pages and Upload Visuals:
Create your pages, upload visuals for their designs, and utilize a Folder Structure for easy management of your application pages. For more detailed information, click See More.
- Set Global Styles:
Establish styles that are consistent across your application by defining them in Settings > Theme interface. Implement these styles across your pages as needed.
- Utilize Styled Components:
Streamline your page designs by identifying components that will be consistently used throughout your application. Create a custom set of Styled Components to expedite the design process.
2
After defining your app structure, design your layouts, drag&drop your components and customize them. Then, you can connect your app pages and preview them to check how they are displayed across various resolutions.
- Using Rendering Component:
Start by identifying the UI screens based on the project flow and expected user behavior. Use the Rendering Component to dynamically load different screens within a single page structure. This is especially useful for dashboard-style applications where multiple sections need to be accessed seamlessly. It enables smooth transitions and content updates without full-page reloads, enhancing both performance and user experience. For more detailed information, click See More.
- Create Block Components:
Start by defining the UI screens according to your project requirements. Consider the application flow and desired user interactions. Determine the use of Block Components for more efficient page rendering, click See More.
- Adjust UI Layout / Responsive:
After creating your pages, use Container components such as Row, Col, and Card to construct the page layout. Utilize the Layout properties in the Style tab for responsive design, adjusting page layouts for different device resolutions. For more detailed information, click See More.
- Drag&Drop Components:
Add the necessary components to your UI screens. Choose from a wide range of pre-defined Basic components or from Your App Components. If you need custom ones to fit your needs use Block Components or Native Components. For more detailed information about Block Components, click See More; about Native Components, click See More.
- Define Component Styles:
Customize the appearance of your components by defining their styles. Adjust colors, fonts, and other visual properties using the Style tab. Utilize ready-made styles set at the application level for flexible development.
- Add Images:
Enhance your UI by incorporating images uploaded to your application. Integrate visual elements and styles that reflect your app's identity.
- Preview Your Page:
While developing your page, use the switch button on top of the Editor to preview. For mobile applications, download the StudioApps application, Using Mobile Preview app, scan the page QR code on the Editor, and see the changes you make on the Editor in real-time on your phone.
3
You can define the behavior of components and the overall page interaction in the application's interface. For example, in this section, you can see how to define the UI behaviours and what happens when a user clicks a button within your app.
- Connect Pages:
Establish connections between different pages of your application. Define navigation paths to enable transitions between screens. For more detailed information, click See More.
- Defining Props and Events:
Define props and events for the components to enable communication and interaction between them. Props allow you to pass data from parent components to child components, while events enable components to communicate changes or trigger actions, click See More.
- Interaction Between Components:
Connect the components to build the desired user interface. Establish relationships between components to create a cohesive and functional UI design, click See More.
- Service Integrations:
To interact with backend services in UIs, call and manage HTTP requests in your page event or component events. For more detailed information, click See More.
- Set / Get Data Storage:
Use the store structure to transfer data between pages. For more detailed information, click See More.
- Validation:
Ensure that the data entered by users into various input fields meets specific criteria or rules before it's submitted. For more detailed information, click See More.
- Defining Global Methods:
You can define methods either on a per-page basis or across the entire application for reuse.
4
After designing your application, you can complete the configurations to optimize your application proxy, localization, custom application-wide features and integrations.
Note: If the application you created in Plateau Studio runs within a different application shell (using the SDK infrastructure), the application-wide settings files should only be located in the shell application.
- Set Service Reverse Proxy:
To receive requests from clients and forwarding them to the appropriate backend servers, set Reverse Proxy file. For more detailed information, click See More
- Setting Multiple Language Support:
To present your application in different languages, use the Localization Settings that you can set page-specific or application-wide. Provide translations for different languages to cater to a diverse audience. For more detailed information, click See More.
- Pipeline Settings:
Define the pipeline structure to streamline the workflow and manage data processing tasks efficiently. Set up alerts to receive notifications for important events or issues within the app. For service calls, you can intercept and use the events provided by the Pipeline mechanism to make adjustments such as modifying service headers during your service call. For more detailed information, click See More.
- Customize Your App Alerts:
Instead of the automatically integrated Plateau Studio alert display for service responses, you can customize your own display using the Alert Component structure and manage it with appropriate parameters. For more detailed information, click See More.
- Customize App Loading Animation:
Customize App Loading Animation: To customize your app loading animation, add your lottie animation and select from App Settings, click See More.
- Integrating oAuth on Login Page:
Proceed to configure IAM (Identity and Access Management) or ADFS (Active Directory Federation Services) settings in the App Settings. Configure authentication and authorization mechanisms to control access to the application and ensure secure user authentication. For more detailed information, click See More.
- Integrating 3rd Party Tools:
To enables to integrate various third-party tools into your applications custom or predefined such as Analytics tools. For more detailed information, click See More.
5
After defining your app's start page, you can preview your app for a review and see in real-life before publishing.
- Assign a Start Page:
Specify a Start Page for your application. This initial screen serves as the entry point for users when they launch the app.
- Preview Your Web App:
Use the Application Preview feature to perform end-to-end previews of your developed application. For more detailed information, click See More.
- Preview Your Mobile App:
To preview your application, click Preview button for web or mobile. For mobile, use StudioApp and scan QR under Preview. For more detailed information, click See More.
6
In Plateau Studio, after creating your application, you can export or publish them for Web or Mobile by using multiple options
- Publish for Web:
If you don't have an environment ready for deploying your application, you can utilize our Azure environment. Alternatively, if deployment environments are available, you can use the Export option to obtain the application package, click See More.
- Publish for Mobile:
For publishing your application to app stores, seek assistance from the Studio Mobile team. If the mobile publish option is available for your application deployment, utilize the StudioApps. To view the published application on mobile, use Studioapp as a playground, click See More
- Export for Web:
In Plateau Studio, after creating your application, you can export your app by creating a package to download to your device or sync with your ongoing apps. You have the option of exporting both compiled and uncompiled versions.
- Compiled Export:
Export your app as a package to download or sync with ongoing projects in Plateau Studio. By default, a package is created when you click the Export button. For more detailed information, click See More.
- Uncompiled Export:
Make changes to your ongoing app without re-exploring it. App Models feature lets you apply updates hassle-free using symphony-cli. For more detailed information, click See More.
- Compiled Export: