آموزش نکات و ترفندها برای اپلیکیشن Oracle Visual Builder (VBCS) - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• مقدمه Introduction

ایجاد یک حساب کاربری رایگان Oracle Cloud Create a Free Tier Oracle Cloud Account

• ثبت نام برای حساب کاربری رایگان OCI Sign up for free tier OCI account

سفارشی سازی index.html index.html customization

• اضافه کردن تصویر Favicon Add Favicon image

• اضافه کردن عنوان صفحه Add Page Title

• اضافه کردن عنوان صفحه به همه با ویژگی داخلی Add page titles to all with inbuilt feature

• نمایش لوگو یا انیمیشن شرکت تا زمان بارگیری صفحه یا برنامه Show company logo or animation until page or application loads

• انیمیشن بارگذاری صفحه برای یک برنامه Redwood Page loading Animation for a Redwood application

طراحی واکنشگرا Responsive design

• مبانی طراحی واکنشگرا در Visual Builder، oj-flex، oj-flex-item Basics of responsive design in Visual Builder, oj-flex, oj-flex-item

• oj-sm-flex-items-initial و oj-sm-flex-initial oj-sm-flex-items-initial and oj-sm-flex-initial

• oj-size-flex-items-1 و oj-size-flex-1 oj-size-flex-items-1 and oj-size-flex-1

• oj-size-flex-items-0 و oj-size-flex-0 oj-size-flex-items-0 and oj-size-flex-0

• تراز بندی Flex (oj-sm-justify-content-center، end، space-between، space-around) Flex justify (oj-sm-justify-content-center, end, space-between, space-around)

• تراز بندی Flex (oj-sm-align-items-center، start،end) Flex Align (oj-sm-align-items-center, start,end)

• مرکز کردن کامل یک کامپوننت با طرح بندی Flex Perfect centering a component with Flex layout

• مخفی کردن محتوا برای یک اندازه صفحه نمایش خاص Hide content for a particular screen size

نقش های کاربری Visual Builder Visual Builder User Roles

• بررسی اجمالی نقش VB Overview on the VB role

کامپوننت های پویا Dynamic Components

• جدول پویا (داده ها از اتصال سرویس) Dynamic Table (Data from service connection)

• جدول پویا (داده ها از Business Object) Dynamic Table (Data from Business Object)

• جدول پویا (پر کردن داده ها با متغیر ADP) Dynamic Table (Populate data with ADP variable)

• فرم پویا (تغییر طرح بندی بر اساس نقش کاربر) Dynamic Form (Change layout based on user role)

• فرم پویا استایل دادن به فیلدها و ستون های فرم Dynamic Form Styling Form fields and columns

• فیلدهای محاسبه شده در کامپوننت پویا Calculated Fields in Dynamic Component

• Component Context در فرم پویا Component Context in Dynamic Form

• کانتینر پویا Dynamic Container

• اضافه کردن فیلد سفارشی select single Add select single custom field

Input Number Input Number

• اعتبارسنج Input Number Input Number validator

Input Text Input Text

• اعتبارسنج Input Text Input Text Validator

Date & Time Date & Time

• تبدیل کننده تاریخ و زمان Date Time converter

• محدود کردن انتخاب حداقل و حداکثر تاریخ Restrict min and max date selection

Form Layout Form Layout

• اعتبارسنجی پارامترهای فرم Validation of form parameters

• تغییر ویژگی بر اساس اندازه صفحه نمایش به عنوان مثال ویژگی label-edge Change property as per screen size e.g. label-edge property

Buttons Buttons

• کامپوننت Toolbar برای گروه بندی دکمه ها Toolbar component to group buttons

Select (Single) Select (Single)

• ایجاد یک LOV پایه با کامپوننت Select(Single) Create a basic LOV with Select(Single) Component

• اصلاح فیلد label و value در متغیر SDP پس از پیکربندی Select single Modify the label and value field in SDP variable after configuring Select single

• itemTemplate برای Select(single) برای اصلاح لیست itemTemplate for Select(single) to modify the list

• اصلاح نوع متغیر SDP و نمایش جزئیات بیشتر در لیست مقادیر Modify SDP variable type and show more details in the list of values

• نحوه استفاده از ویژگی item text در Select single How to use item text property of Select single

• نحوه استفاده از ویژگی value item در Select single How to use value item property of Select single

• پر کردن Select (single) با Array Data Provider (ADP) Populate Select (single) with Array Data Provider (ADP)

• جستجوی غیر حساس به حروف کوچک و بزرگ با متغیر SDP Case insensitive search with SDP variable

• (2025) نمایش قالب مجموعه جدول (2025) Show table collection template

Select (Multiple) Select (Multiple)

• استفاده از کامپوننت Select (Multiple) Using Select (Multiple) component

Table Component Table Component

• پر کردن جدول با متغیر Array Data Provider (ADP) Populate table with Array Data Provider (ADP) variable

• پر کردن جدول با متغیر Service Data Provider (SDP) Populate table with Service Data Provider (SDP) variable

• وارد کردن و استفاده از کامپوننت Tooltip Import and use Tooltip component

Editable Table (Array Data Provider) Editable Table (Array Data Provider)

• ایجاد Types، Variables برای داده های ADP کامپوننت Table Create Types, Variables for Table component ADP data

• قابل ویرایش کردن جدول با پذیرش مقدار از کاربران در ستون های جدول Make Table editable by accepting value from users in table columns

• ایجاد شنوندگان رویداد جدول ojBeforeRowEditEnd و ojBeforeRowEditEnd Create ojBeforeRowEditEnd and ojBeforeRowEditEnd table event listeners

• ذخیره تغییرات پس از ویرایش به سیستم منبع (BO، .. غیره) Save changes post editing back to source system (BO, ..etc)

• بررسی اینکه آیا جزئیات ردیف در جدول قابل ویرایش اصلاح شده است یا خیر Check if row details got modified or not in editable table

• حذف ردیف از جدول قابل ویرایش Delete row from editable table

• نمایش فیلد محاسبه شده در جدول قابل ویرایش Display calculated field in editable table

• ذخیره فقط سوابق اصلاح شده برنامه منبع Save only modified records source application

• اضافه کردن ردیف جدید به جدول قابل ویرایش Add new row to editable table

Editable Table with BufferingData Provider (نسخه 2024) Editable Table with BufferingData Provider (2024 edition)

• (به روز رسانی آوریل 2024) نوع متغیر BDP جدید در VB اضافه شد (April 2024 UPDATE) new BDP variable type added in VB

• ایجاد نوع و متغیر BDP Create BDP type and variable

• ایجاد جدول قابل ویرایش با BDP Create editable table with BDP

• ایجاد شنونده رویداد before row edit جدول Create table before row edit event listener

• ایجاد شنونده رویداد before row edit end جدول Create table before row edit end event listener

• رفع مشکل در دریافت موارد قابل ارسال Fixing issue with get submittable items

• حذف مورد Delete Item

• ثبت BDP دریافت موارد قابل ارسال Logging BDP get submittable Items

• اضافه کردن مورد Add Item

• ذخیره تغییرات به برنامه منبع (اضافه کردن، به روز رسانی، حذف) Save changes back to source application (Add, Update, Remove)

• استفاده از ADP به عنوان ارائه دهنده داده Use ADP as data provider

• متغیر BDP به روز نمی شود (مشکل در آخرین به روز رسانی) BDP variable not getting updated(Issue in latest update)

Editable Table with BufferingData Provider (نسخه 2023) Editable Table with BufferingData Provider (2023 edition)

• مقدمه Introduction

• ایجاد متغیر Buffering Data Provider (BDP) و اختصاص داده ها به جدول Create Buffering Data Provider (BDP) variable and assign data to Table

• ستون های جدول را قابل ویرایش کنید و شنونده رویداد before row edit را ایجاد کنید Make table columns editable and create before row edit event listener

• ایجاد شنونده رویداد Before Row Edit End Create Before Row Edit End event listener

• حذف یا حذف مورد از متغیر BDP Delete or remove item from BDP variable

• ذخیره تغییرات قابل ارسال در BDP به برنامه منبع (Business Object، DB، ..) Save submittable changes in BDP to source application (Business Object, DB,..)

کامپوننت Combobox(One) Combobox(One) component

• مبانی کامپوننت Combobox (one) Basics of Combobox (one) component

• پر کردن Combobox با Service Data Provider (SDP) Populate Combobox with Service Data Provider (SDP)

• پر کردن Combobox با Array Data Provider (ADP) Populate Combobox with Array Data Provider (ADP)

• نمایش تصویر / آیکون با برچسب در لیست Show image / icon with label in the List

• استفاده از for-each-bind Using for-each-bind

• نحوه استفاده از option renderer How to use option renderer

Train Component Train Component

• استفاده از کامپوننت Train برای ساخت ویزارد چند مرحله ای Use Train component for building multi step wizard

• سفارشی سازی ناوبری کامپوننت Train با دکمه Customize Train Component navigation with button

• اضافه کردن اطلاعات برای هر مرحله در ویزارد Train Adding information for each step in Train wizard

• اضافه کردن دکمه submit در انتهای ویزارد کامپوننت Train Adding submit button at the end of Train component Wizard

Dialog Component Dialog Component

• ایجاد یک صفحه پاپ آپ یا طرح بندی ساده با کامپوننت Dialog Create a simple popup screen or layout with Dialog component

• تغییر انیمیشن Dialog (Ripple، ZoomIn، FadeIn، None، ... غیره) Change Dialog animation (Ripple, ZoomIn, FadeIn,None,...etc)

Business Objects Business Objects

• اضافه کردن یک ردیف (رکورد) به صورت دستی Add a row (record) manually

• ایجاد یک فیلد فرمول Create a formula field

• ایجاد فیلد Aggregation Create Aggregation field

• ایجاد فیلد بر اساس فرمول با iterator Create field based on formula with iterator

• ایجاد فیلد بر اساس فرمول با conditional iterator Create field based on formula with conditional iterator

• قانون کسب و کار : Object Trigger Business Rule : Object Trigger

• قانون کسب و کار : Field Trigger Business Rule : Field Trigger

• قانون کسب و کار : Object Validator Business Rule : Object Validator

• قانون کسب و کار : Field Validator Business Rule : Field Validator

• قانون کسب و کار : Object Function Business Rule : Object Function

• REST API برای Business Object REST API's for Business Object

Service Connection Service Connection

• فراخوانی REST API Invoke REST API

• فراخوانی Integration به عنوان REST API از طریق متدهای http GET / POST Invoke Integration exposed as REST API over GET / POST http methods

• فراخوانی وب سرویس SOAP / وب سرویس گزارش BIP Invoke SOAP web service / BIP report web service

• دسترسی به پایگاه داده Access Database

• بررسی اجمالی CORS و Visual Builder Proxy برای اتصال سرویس CORS and Visual Builder Proxy overview for service connection

• فراخوانی REST API با درخواست multipart/form-data Call REST API with multipart/form-data request

Embed Web Pages Embed Web Pages

• جاسازی Google Map و Google Image در صفحه وب Visual Builder Embed Google Map and Google Image in Visual Builder web page

Embed Visual Builder Web Page in Oracle SaaS / Fusion Cloud Embed Visual Builder Web Page in Oracle SaaS / Fusion Cloud

• جاسازی صفحه Visual builder در SaaS / Fusion با Page Integration Embed Visual builder page in SaaS / Fusion with Page Integration

• تکلیف: جاسازی برنامه Employee در Fusion با URL سفارشی Assignment: Embed Employee application in Fusion with customized URL

احراز هویت مبتنی بر توکن JWT بین Oracle SaaS (Fusion) و Visual Builder JWT token based authentication between Oracle SaaS (Fusion) and Visual Builder

• رمزگشایی توکن JWT و نام کاربری و یادگیری ایجاد متغیر Pass on value Decode JWT token and username and learn to create Pass on value variable

• استفاده از Fusion HCM REST API برای احراز هویت کاربر Use Fusion HCM REST API to authenticate the user

• مخفی کردن لیست ناوبری برای کاربران غیرمجاز با حذف عناصر HTML Hide the navigation list for Unauthorized users by removing HTML elements

Oracle BI Publisher (BIP) Report Oracle BI Publisher (BIP) Report

• بدون Integration فراخوانی وب سرویس SOAP / وب سرویس گزارش BIP Without Integration Invoke SOAP web service / BIP report web service

• فراخوانی گزارش BIP و نمایش در کامپوننت جدول با Integration Call BIP report and display in the table component with Integration

پیاده سازی صفحه بندی (برای REST API ها، Integration، ... غیره) Implement Pagination (for REST API's, Integration,...etc)

• ساخت integration برای واکشی رکوردهای پایگاه داده در دسته ها Build integration to fetch database records in batches

• اضافه کردن صفحه بندی به کامپوننت جدول در برنامه Visual Builder با SDP Add Pagination to table component in Visual Builder application with SDP

• اضافه کردن صفحه بندی به کامپوننت جدول در برنامه Visual Builder با ADP Add Pagination to table component in Visual Builder application with ADP

Javascript Examples Javascript Examples

• بررسی Idle Timeout Check Idle Timeout

• اضافه کردن عمل wait در زنجیره عمل با JavaScript Adding wait action in action chain with JavaScript

• فیلتر کردن داده ها (ADP، SDP، array، .. غیره) Filtering of data (ADP, SDP, array,..etc)

• تولید داده متغیر ADP (Array Data Provider) با JavaScript Generate ADP (Array Data Provider) variable data with JavaScript

• حذف رکوردهای تکراری / داده ها Remove duplicate records / data

• نحوه اضافه کردن یک Signature Pad با استفاده از JavaScript How to add a Signature Pad Using JavaScript

• رمزگذاری / رمزگشایی AES AES encryption / decryption

• ضبط صدا (میکروفون) Voice recorder (Microphone)

• کپی به کلیپ بورد و کامپوننت Popup Copy to Clipboard and Popup component

User Interface Examples User Interface Examples

• ساخت فرم ثبت نام / فرم بازخورد Build Registration Form / Feedback Form

• جدول قابل ویرایش چندگانه Many editable table

• Collection Container Collection Container

External JavaScript library External JavaScript library

• ارجاع به کتابخانه JavaScript خارجی در برنامه VBCS با index.html، app-flow.json Refer external JavaScript library in VBCS app with index.html, app-flow.json

ORDS (Oracle REST Data Services) ORDS (Oracle REST Data Services)

• ایجاد و مصرف ORDS REST API برای جدول پایگاه داده در VB Create and consume ORDS REST API for database table in VB

• استفاده از POSTMAN برای مصرف ORDS REST API Use POSTMAN to consume ORDS REST APIs

• فعال کردن اعتبار OAuth برای ORDS REST API Enable OAuth credentials for ORDS REST APIs

• حذف نقش ها، امتیازات، نگاشت، OAuth و غیره ORDS Delete ORDS roles, privilege, mapping, OAuth,etc

• فعال کردن مجوز مورد نیاز برای ORDS REST API با SQL developer Enable Authorization required for ORDS REST APIs with SQL developer

• ایجاد ORDS REST API برای جدول با SQL / PLSQL Create ORDS REST API for table with SQL / PLSQL

موارد استفاده از فایل Excel (xlsx) Excel (xlsx) file use cases

• ایجاد فایل Excel (.xlsx) با استفاده از SheetJS Create Excel (.xlsx) file using SheetJS

• خواندن فایل Excel (.xlsx) با استفاده از SheetJS Read Excel (.xlsx) file using SheetJS

• ایجاد فایل Excel (.xlsx) با استفاده از ExcelJS Create Excel (.xlsx) file using ExcelJS

• خواندن فایل Excel (.xlsx) با استفاده از ExcelJS Read Excel (.xlsx) file using ExcelJS

نکاتی برای کار با فایل ها (CSV، PDF، ... غیره) Tips for working with Files (CSV, PDF,...etc)

• خواندن / تجزیه فایل CSV Read / Parse CSV file

• درج انبوه با فایل CSV، دانلود، بازنشانی، آپلود به BO Bulk insertion with CSV file, download, reset, upload to BO

• تولید فایل PDF Generate PDF file

• دانلود فایل با کلیک دکمه | base64 / binary به فایل Download file on button click | base64 / binary to file

• پیش نمایش سند در صفحه بدون دانلود Preview document within page without downloading

• ادغام فایل های PDF Merge PDF files

• تقسیم فایل PDF به چندین فایل PDF Split PDF file into multiple PDF files

Notification Notification

• تغییر بنر پیام Redwood به اعلان پیام غیر Redwood Change Redwood message banner to non redwood message notification

ترفندهایی برای برخی از موارد استفاده رایج Tricks for some of common use cases

• کپی متغیرها و انواع از یک صفحه به صفحه دیگر Copy Variables and Types from one page to another

• رفتار داده های کثیف برای ردیابی تغییرات Dirty data behavior to tack changes

• نمایش محتوای HTML در صفحه وب با oj bind dom Show HTML content in the web page with oj bind dom

Action Chain use cases Action Chain use cases

• کپی Action Chain از یک صفحه به صفحه دیگر Copy Action Chain from one page to another

• فعال کردن زنجیره عمل JavaScript در صورت عدم فعال بودن Enable JavaScript action chain if not enabled

• فراخوانی یک زنجیره عمل مشترک از چندین دکمه Call a common action chain from multiple buttons

• تست زنجیره های عمل Test Action Chains

• عمل Fire Event (رویداد سفارشی) Fire Event action (Custom event)

• اعلان رویداد سفارشی از JavaScript Fire custom event from javascript

HAR (HTTP Archive) File HAR (HTTP Archive) File

• دانلود فایل .har با مرورگر Google Chrome و Microsoft Edge Download .har file with Google Chrome and Microsoft Edge browser

Application Management Application Management

• نحوه ویرایش یک برنامه پس از انتشار یا ایجاد نسخه جدید How to edit an application post publishing or create new version

• قفل و باز کردن برنامه وب زنده Lock and unlock live web application

• تغییر نام یک برنامه Rename an application

• تکثیر یک برنامه Duplicate an application

• حذف یک برنامه Delete an application

• مجوز دسترسی ناشناس به برنامه برای یک کاربر Allow anonymous access to application for an user

• اضافه کردن کاربر ناشناس به امنیت مبتنی بر نقش Business Object Add anonymous user to Business Object's role based security

Oracle SaaS VB / AppUI Oracle SaaS VB / AppUI

• اجرای Visual Builder از Fusion instance Launch Visual Builder from Fusion instance

• ایجاد یک AppUI و انتشار Create an AppUI and publish

• امنیت AppUI AppUI security

• وارد کردن AppUI با File (Workspace / Git repository) Import AppUI with File (Workspace / Git repository)

• ارجاع به کتابخانه JavaScript خارجی Refer external JavaScript library

• اصلاح Gruntfile.js برای استقرار AppUI با کتابخانه های JS خارجی Gruntfile.js modification to deploy AppUI with external JS libraries

• Custom Objects and AppUI Custom Objects and AppUI

• ایجاد یک Build jobs عمومی Create a generic Build jobs

• Undeploy / Delete AppUI from Fusion Undeploy / Delete AppUI from Fusion

• حذف شاخه Git repository Delete Git repository branch

(Optional) Provisioning Visual Builder instance (Optional) Provisioning Visual Builder instance

• تامین با Visual Builder Studio Provision With Visual Builder Studio

• تامین با Oracle Integration Provision with Oracle Integration

تبریک!!! Congratulations!!!

• تبریک!!! و تشکر از شما برای اتمام موفقیت آمیز این دوره Congratulations!!! and Thank You for completing this course successfully