Skip to main content
WeebPal

Main navigation

  • Home
  • Solutions
    • Mine Rooms - Build one for forever use booking system!
    • EverLMS - Dedicated Learning Management System
    • MineTicket - Dedicated Ticketing and Booking Solutions for Diverse Businesses
    • Sitedict - Your Ultimate Website Directory and Dictionary
    • Contribution
      • Contrib Module: Drupal Component Builder
      • Contrib module: Drupal Mega Menu
      • Free Drupal Themes (2015 - 2017)
  • Projects Portfolio
  • Blogs
  • Warranty
  • About us
Start your project

Banner

Banner guide

How to create a new component in Component Builder?

Menu

  • I - Create your my_module
    • 1 - Create my_module
    • 2 - Create plugin file
    • 3 - Create Yml config
      • 3.1 - Create component_[name of component].yml file
      • 3.2 - Create template file
      • 3.3 - Create config.yml file
      • 3.4 - Create other files in config folder by exporting files from Component Item type
    • 4 - Enable my_module
  • II - Clone module starter of component builder

I - Create your my_module

If you want to create a module from scratch then follow these steps.

1 - Create my_module

To create a module in Component Builder, we find the modules folder in the component_builder module, then create a module name with folders and file *.info.yml in the below picture.

2 - Create a plugin file

In my_module module, we create a plugin file with the following path: /src/Plugin/ComponenntBuilder/*.php

3 - Create Yml config

In the /components folder, we create a component type folder with the following structure: #components/component_[my component type]

Next, we will create files and folders inside the newly created folder.

3.1 - Create component_[name of component].yml file

We create the file with the following structure:

#components/component_[my component type]/component_[my component type].yml

3.2 - Create a template file

We create the file with the following structure:

#components/component_[my component type]/templates/component-[my-component-type].html.twig

3.3 - Create config.yml file

We create the file with the following structure:

#components/component_[my component type]/config/config.yml

3.4 - Create other files in the config folder by exporting files from the Component Item type

Go to: /admin/structure/component-item/types/add to add a component item and needed fields

Go to: /admin/config/development/configuration/single/export to export yml config

In the Configuration type, we need to export the configuration below:

  • Component Item type
  • Field storage
  • Field
  • Entity form display
  • Entity view display
  • Image style (optional)

*For Example, we export the .yml file with Configuration type (Image style).

Finally, we have files in the folder config after we export yml

4 - Enable the module

To turn on the component, we follow the path in your website: /admin/structure/component-builder/settings

II - Clone module starter of component builder

If you don't want to waste time on the module's structure, copy the module starter and change its name.

When you install the component_builder module, you can see it inside the component_builder/modules/ folder. There is a my_module.zip file that is a module starter. You extract the file and copy the folder then rename it to your module.

Next, you rename files in your module as shown in the picture below.

The underlined places where you need to rename files and codes inside that file.

In the config folder, except for the config.yml file, you need to export the .yml file for your module. You can refer to item 3.4

Motto

They may forget what you said, but they will never forget how you made them feel.Carl W. Buehner
I don't create companies for the sake of creating companies, but to get things done.Elon Musk
Price is what you pay, value is what you get.Warren Buffett

Contact

If you're looking for a Drupal Team who can get your project DONE completely, ON TIME with GUARANTEED results; either can solve any technical problems for you, please leave us a request or send an email to [email protected], contact WhatsApp at (+84)-9388-9399-5 as a choice.

Supports

  • Blogs
  • FAQ
  • Portfolio
  • Warranty Policy
  • Start your project
  • Themes
  • Terms of use
  • Guide
  • About us
  • Contact us
  • Careers

COPYRIGHT © WEEBPAL SINCE 11/01/2012 ALL RIGHTS RESERVED.