Skip to content
Joseph Geller edited this page Nov 27, 2018 · 75 revisions

Welcome to the Joomla-Component-Builder wiki!

JCB Wiki!

These tutorials will give you a basic understanding on how JCB works!

A revision of this page to include timelines for all videos and documentation to accompany the videos is underway. Anticipated completion date is early next year. Chapters one through seventy one have been transcribed from the corresponding videos. They are presented here in a very raw format and are being edited.

For an example of what the finished chapters will look like the fifth chapter, is complete. We are now editing the first chapter and also adding timelines for the videos that do not have it. The timelines add the visual reference needed at various points in each chapter in lieu of adding the frame for illustration. After completing chapters one through four, we'll complete chapters six through seventy one which will take some time. Updates on progress will be posted in the title of the chapter currently being edited here. After each chapter is finished, an announcement will be posted in the forum.

If you have more questions, use the forum.

The list of videos that are already available are listed below. We will be editing this soon to correspond with each chapter in the documentation and to be in the same order.

Intro

  • Basic introduction

Installation

  • Basic installation instructions

General Planning

  • Planning your component

Field Types

  • 01:05 Field types Create Field Types Using basic joomla article to explain field types and their relationship within views
  • 01:57 List view Difference between list view and edit view. Plural and single
  • 05:45 Compile error Remember to select correct options that suit your build.
  • 06:35 Install compiled component Installing from within component builder, quick link
  • 08:04 Admin fields-views edit explanation of adding-editing fields
  • 09:26 Default field-types Default field-types that come shipped within Component
  • 12:29 Joomla standard form fields Joomla website for standards regarding form fields
  • 14:05 XML string format for joomla Reusable field types
  • 14:45 Text field type example Fields within Text field type
  • 15:15 Joomla XML example Text Field XML example
  • 17:43 XML string within compilier How XML string is build and compilied within component builder.

Basic Fields

  • 01:05 New Field Type Using text field as example
  • 01:08 Basic field type Using text field as example
  • 03:16 Data Types Basic introduction to data types
  • 03:35 Indexes Types
  • 04:29 Store Method Default, JSON and other options
  • 08:00 Compiled info in UI Explanation of compiled fields
  • 09:30 Store Methods support Encryption Encryption of fields supported
  • 10:50 Example E-mail Field E-mail field and XML fields example
  • 14:30 Target Fields with custom CSS/Javascript Adding custom CSS/javascript to fields, in both edit and list views using Jform and Jquery
  • 17:52 Repeatable field with date Adding PHP and Javascript in custom script
  • 20:29 List Field and adding options, Static Setting up a static list field
  • 24:43 Radio Button example
  • 26:57 Colour Field example
  • 28:00 Showon Attrib example
  • 29:24 Category Field example
  • 32:14 Editor Field example
  • 33:30 Media Field example
  • 34:37 Notes Field example
  • 37:20 Translation brief overview

Admin Views

  • 01:05 Admin Views/ Naming convention
  • 03:00 Example View Preacher
  • 04:35 View Icons
  • 06:19 Permission Implementation
  • 19:25 Tabs
  • 19:34 Tabs - Default - Publishing -Permissions
  • 20:30 Tabs - Preacher example
  • 20:55 Tabs - Fields Linking (Preacher)
  • 22:20 Tabs - Fields Linked Views (Sermons)
  • 32:28 Fields
  • 38:00 Fields Alignment in Admin View
  • 40:35 Fields Alignment order
  • 41:45 Fields Title - Alias
  • 43:46 Conditions
  • 44:37 Conditions using Sermons example
  • 59:58 Field Listing
  • 60:15 Custom CSS View - List
  • 60:42 Custom Javascript View - List Footer
  • 61:46 Custom PhP - Adding AJAX for Controller - Model
  • 70:50 Get Item - Items Joomla API Method
  • 72:09 Batch Copy - Move Method
  • 75:07 MySQL Dumps Test Data (insert into table)

Advanced Fields

  • 00:39 Local file list example
  • 05:29 Sermon Preacher Custom Field
  • 07:29 Field Information Guide
  • 08:00 Jform in Component Builder
  • 09:21 Extending List in Custom Field
  • 10:50 Naming Convention for Component and Table names
  • 16:02 Custom PHP layout in Field Definition
  • 18:08 Built code for Sermon Preacher
  • 22:36 Dropbox custom List example
  • 23:32 Component Helper Class
  • 31:02 Custom User
  • 40:40 Repeatable Custom Fields
  • 45:21 Joomla Icons Info & Link

Adding Admin Views to a Component

  • 00:54 Sermon Component settings as Example
  • 01:43 Adding Views settings icons
  • 02:45 Settings Switch Admin Menu
  • 03:00 Settings Switch Dashboard Items
  • 03:45 Settings Switch Submenu
  • 03:58 Settings Switch Auto Check-in
  • 05:04 Settings Switch Keep History
  • 14:15 Settings Switch MetaData
  • 15:32 Settings Switch Access
  • 16:34 Settings Switch Export/Import
  • 18:14 Settings Switch Edit - Create - Site Views
  • 24:38 Settings Switch Order

Component Settings

  • 00:50 Compiler Info
  • 04:20 Adding Custom Files - Folders
  • 04:54 Adding Custom Admin Views
  • 07:28 Adding Custom Config Fields
  • 08:21 Custom Switches using Sermon Component as example
  • 09:45 Adding Contributers
  • 10:25 Adding Uikit
  • 11:05 Adding Fields to Custom Config Fields
  • 13:27 Space HR field in Component Fields
  • 15:09 Tab - View names fields added to Site Menu
  • 20:00 Site View explanation of above tabs
  • 20:52 Quick explanation of creating site views

Component Scripts

  • 00:46 Create User Helper Methods
  • 01:45 Example Helper Method (Create User)
  • 07:15 Add UiKit
  • 07:35 Add Global CSS to Admin Backend
  • 07:45 Add Custom PhP Helper Admin Class
  • 08:00 Add Global Admin Event
  • 11:36 Add Custom PhP Helper Site Class
  • 13:50 Add MySQL Dump (Att 2nd place it can be done)
  • 14:15 Dashboard Methods (With Example)

Component FTP and more

  • 00:05 Adding Readme script
  • 01:30 Place Holders
  • 02:20 Component-Builder Link Back Info*
  • 02:47 Markdown Info
  • 03:10 Admin - Site Views Adding Editing
  • 03:52 FTP Info - Updating Component
  • 06:30 FTP Info - Sales Server
  • 08:03 Component Builder Global Options
  • 08:13 Component Builder Encryption Settings
  • 09:07 Component Builder Folder Paths
  • 12:20 Component Builder Compiler.PhP FTP Info
  • 14:15 Update Server extra Info (Versions)

dynamicGet

  • 00:15 Sermon - Preacher Get Example
  • 00:40 Dynamic Get Source Selection
  • 03:45 Dynamic Get Preacher View
  • 04:23 Get Types - Get Item/List Get Custom
  • 06:42 Get List Pagination
  • 08:50 Join Data Views - Tables
  • 10:22 Join View Tables Example
  • 15:00 Dynamic Get Sermon Preacher in Code
  • 21:49 Dynamic Get Custom Script
  • 23:18 Dynamic Get Join DB Tables
  • 24:05 Dynamic Get Filters - Where - Ordering - Globals
  • 27:34 Dynamic Get Get Access (Default added)
  • 29:49 Dynamic Get Where
  • 30:41 Dynamic Get Ordering

Adding dynamicGet to a Site View

  • 00:24 Checking the Target Datasets
  • 00:35 Populate Fields from Get's
  • 01:38 Dynamic Values
  • 03:29 Inserting Values into View
  • 06:35 Var Dump
  • 07:45 Gets in the Code eg: Preacher.php
  • 09:17 Looking at the Dynamic get
  • 10:59 Preacher View.html.php generated code
  • 11:50 Checking the target datasets
  • 13:40 Site Preacher tmpl folder

Adding Templates and Layouts to a Site View

  • 00:05 Relationship between templates/layouts in views
  • 00:47 Preacher View Example
  • 01:38 Preacher Site View Example
  • 02:20 Location of Templates
  • 03:40 Default View in Code
  • 06:47 Quick Layout Example Within View
  • 08:00 Explantation Templates / Layouts within Joomla

Template Setup

  • 00:10 Creating Templates
  • 00:37 New - Copying templates
  • 01:25 Language String
  • 02:20 Adding custom script/code to template
  • 03:10 Adding Javascript to template

Layout Setup

  • 00:05 Layouts
  • 00:40 How layouts work with dynamic gets
  • 01:53 How Templates call Layouts
  • 03:10 Sermon List-item Layout
  • 04:00 Using the View Key
  • 05:16 Layout to Template Custom Scripting
  • 06:00 Dynamic Custom Views using Template
  • 06:20 Above in the Code
  • 07:35 Config.xml
  • 09:30 Layout Concept
  • 11:05 Layout Custom Script Area

Custom Admin Views

  • 00:35 Example view from other Component
  • 03:55 Component Builder Custom Admin View from above
  • 04:15 Add custom button example
  • 05:13 Adding Script for the controller methods
  • 06:20 Area for Custom Scripting
  • 07:00 Combing multiple data results example

Adding Site Views to a Component

  • 00:30 Using Sermon Dist as Example
  • 00:42 Settings - Views
  • 01:25 Adding Site Views Important Glitch
  • 02:34 Site View Options (Menu-Metadata-Default View-Access)

Adding Custom Admin Views to a Component

  • 00:03 Example Component not Sermon Dist
  • 00:16 Settings - Settings - Custom Admin View
  • 00:34 Multiple Switches due to being dynamic
  • 00:56 Icon-main menu-dashboard-sub menu see time for more switches
  • 01:45 Targeting Item so some switches are No
  • 01:55 Select target view
  • 02:19 Showing within the component
  • 03:46 Order Before Selection
  • View rest for how buttons are implemented - Important

Tweaking MySQL Demo Data

Global Settings of Component Builder

  • 00:25 Options Button For Global Config
  • 01:20 Check in Timer
  • 01:49 Enable Versions
  • 02:28 Minify JS
  • 03:14 Contributor Info
  • 03:40 UiKit Settings
  • 04:48 Encryption Settings Key Important
  • 05:41 Folder Paths
  • 06:53 Permissions
  • 11:25 Example Preacher Permissions
  • 13:15 Field Permission Switch

Adding a custom time field

  • 00:06 Fields
  • 02:25 Joomla Form-rule Example
  • 04:30 Component builder new text field example
  • 05:19 Script JS
  • 07:00 Example time-date (custom component)
  • 08:51 JS repeatable field time-date Important

How to integrate the Create User Helper Method in your Components

How to use email helper in your components.

  • 00:25 Example of Email Helper Class
  • 01:10 Setting Up Email Helper Class
  • 01:20 Libs - Helpers in Component
  • 01:50 Settings - Config area
  • 03:05 In Code Field Names
  • 03:36 Component Global Options - Mail Configuration
  • 04:00 Switch Global Mailer Options
  • 04:12 Joomla Global Configuration - Server
  • 05:10 Component Builder Email Switch Options
  • 05:42 DKIM Settings (Encryption)
  • 07:15 Default Global in Code
  • 08:45 DKIM Values in Code
  • 09:30 Error Checking for emails in code
  • 11:45 Implementated example
  • 13:56 Above example in code Worth Watching

How to setup a store message method along side the email helper class

  • 00:03 Example in Code
  • 01:31 Code Snippet in Method
  • 02:17 Adding Code to Admin Helper Area
  • Important watch to end

How to ensure that a field is not escaped when added to list views.

  • 00:02 Example extra styling in fields
  • 00:37 Settings - Editing View - PhP Area
  • 01:05 Settings Values in the code - Add PhP Getitems Method
  • 02:00 Looping through data till target found - adding styling
  • 03:20 Preventing the escaped info
  • 04:16 Field adding escape=false to code

How to change exported values and setup custom import options

  • 00:25 Example Component
  • 01:00 Example IP Tables
  • 01:39 Export feature
  • 02:56 Exported example in xls format
  • 03:27 Export data in code
  • 05:06 Admin View - PhP - (GetListQuery)
  • 09:37 Import features explained
  • 10:15 Custom Import Tab (default import code)

How to overwrite the custom fields

  • 00:03 Using default fields with custom code
  • 01:33 Example of shown default fields in list view
  • 02:50 Example created_by field in View
  • 03:56 Compiled in code
  • 05:12 Adding the Fields
  • 05:45 Adding in tabs (default 15 tab)

How to filter a list field based on association with another field

  • 00:02 Explanation of filter fields
  • 00:45 Example component with filters
  • Volume to low to fully understand - Will be done over soon

Automatic import of custom code during compilation in JCB

Excellent Update to JCB

  • 00:02 Custom Code
  • 02:00 Example demo compiled
  • 02:35 Editing code in the editor
  • 03:13 Conventions used (Insert code - Replace code)
  • 05:45 Limitations for Inserting and updating
  • 08:11 Showing example with replace
  • 09:06 Recompiling the demo component with replace
  • 09:30 Checking the custom code tab before installing
  • 10:00 Looking at the replaced code in editor
  • 11:40 Inserting custom code via editor
  • 13:55 Checking the custom code tab for new entry before new installation

TIPS: Custom Code

JCB manual custom code implementation

  • 00:02 Brief explanation
  • 03:18 Updating code from JCB in the editor
  • 06:43 Github explanation for update and insert issue 37
  • 12:34 Custom Codes in JCB
  • 13:00 Placeholder
  • 13:57 Example Field
  • 18:55 Difference between editor changes and custom code changes
  • Imptortant - Watch till end

Export & Import of fully mapped components

Translation Manager in JCB explained

How to import JCB package using a KEY

Setting Site View Permission

Auto create SQL updates for Components in JCB

Setup Site Edit View in JCB

Automated backup system in JCB

Adding Helper Structures to any JCB component

Upgrade to JCB v2.5.8 and using the new Admin View and Admin Fields

How to setup taps after upgrade to v2.5.8 in JCB

Major Release of JCB v2.6.0

Hello World Component with Joomla Component Builder/Creator - Extended

Adding your own rule validation to a field in JCB

General overview of how community snippets work

Tutorial on forking JCB snippets so you can share your snippets with the rest of the Cummunity

Tutorial on making a pull request at Joomla Component Builder Snippets

The New Library Manager Area

Easy Translation via excel

Dynamic Router Implementation Explained

Automated database updates in Joomla during development of a component

Quick Subform Demonstration

VDM Package Import Option

Dynamic File and Folder Inclusion concept

How to use the file field type to upload a file in JCB

Drag and Drop Upload functionality in JCB

The Quick Hello Word with JCB

Adding none database fields to an admin view

The custom dashboard option in JCB

More coming....

I will constantly be adding more tutorials, and would encourage you to support our efforts.

Come on buy me a coffee :)

  • PayPal: paypal.me/asseblief
  • Bitcoin: 18vURxYpPFjvNk8BnUy1ovCAyQmY3MzkSf
  • Ethereum: 0x9548144662b47327c954f3e214edb96662d51218
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.