Integration of CRM tool with web applications has turned out to be an undaunted task especially when you monitor/manage your contacts, existing clients and leads generated for marketing campaigns. In this post, I would like to walk you through Salesforce integration with Drupal web application. Let’s dive in to the basics of Salesforce.

Salesforce is a cloud-based CRM solution that helps business effectively manage sales, service, marketing, collaboration, analytics, and building custom mobile apps. In order to manage the business effectively, companies need to integrate their Drupal website with Salesforce CRM solution, which is quite configurable. Not to mention Drupal offers various modules that help in synchronizing your application with CRM. Check out how.

Prerequisites

• A salesforce developer account
• A Drupal website
• Drupal Salesforce module 

Server requirement: 

SSL is mandatory for using Salesforce on the website.

Creating connected app in Salesforce

Step 1 Login your Salesforce account.

Step 2 Follow the steps:

           Setup->Apps->App manager->New connected App

Follow the steps as shown in the screenshot:

Step 3 Now you can see connected app form, select required fields.

3.1 Basic information: Provide basic information about your app. 

3.2 API (Enable OAuth setting): OAuth (Open Authorization) gives access to resources without revealing user credentials to apps and end user's account information can be used by third-party services. Select setting checkbox. 

Step 4 Check whether the setting is selected or not as it toggles a form with some other required fields. 

Step 5 Enter the callback URL “yourdomain.com/salesforce/oauth_callback”.

Step 6 Select other fields as per your requirement and process it. Wait for 2-10 minutes before using your app. Now continue the process. 

Here you will get the consumer key and secret key (these keys are required to connect Drupal to Salesforce). Now you can use the connected app on your Drupal website.

Salesforce module:

Download Salesforce module and install it on your Drupal website. Also, download and install dependent modules like key & encrypt.

Let’s check out the submodules in Salesforce and what they do: 

• Salesforce: OAUTH2 authorization, wrapper around REST API.
• Salesforce Mapping: Maps Drupal entities to Salesforce fields, including field level mapping.
• Salesforce Push: Pushes Drupal entity updates in to Salesforce.
• Salesforce Pull: Pulls Salesforce object updates into Drupal on cron run.
• Salesforce Encrypt: This module is dependent on two other module Encrypt & Key so make sure these are installed. Module required for access and refresh token with security.

Setting up Salesforce on Drupal website: 

Step 1 Go to Configuration->Salesforce->Salesforce Authorization 

Step 2 Add the oAuth configuration setting here

Create Salesforce mapping: 

Before Salesforce mapping, make sure what exactly are you looking for. 

Scenario:

Let’s map out basic information, like first name, last name, email of Drupal users to Salesforce and push them to CRM tool. 

Follow this path (admin/structure/salesforce/mappings) to get a form similar to the shown below.

Now fill the list of values: 

• Label: Label of the mapping.
• Drupal Entity: Select users in both of the fields “Drupal Entity Type” and “User Bundle” in order to map out Drupal users. 
• Salesforce object: Here the selected value should be contacted only.
• Action Trigger: Ones you create a user on Drupal site, use that as a contact in Salesforce tool. For this, select all the data push actions, like insert, update, delete.

Now select Upsert key and Mapped fields.

Upsert key: By setting Upsert key on Salesforce, you can prevent data duplicacy.

Mapped fields: Fill the following columns. 

• Property: Listed Drupal fields
• Salesforce field: Listed Salesforce fields
• Direction: There are three directions on the radio button. Here you can see the mapped data that will be updated on Salesforce or on your Drupal site or will synchronize on both. Your mapped field data depends on this setting. 
• Operations: If you don’t want to map this field then delete it by selecting the ‘delete field option’.

I have added Email as an Upsert key and for direction field, select “Drupal to Salesforce”.

How to test: 

Steps 1 Create a user from admin.

Note: Salesforce module will automatically push the data on CRM with contacts.  

Step 2 Run cron directly to update data with Salesforce contact by using the following path: 

/admin/config/system/cron 

The integration of Salesforce with your Drupal has endless benefits as it helps your sales and marketing to work efficiently and meet the process they perform on a regular basis in a more streamlined way. Further, it also enables you to custom-tailor industry-specific tasks, such as contact status in the Sales pipeline and contact reminders. 

Below given is a presentation on "Salesforce integration with Drupal".

This is the fifth post in my series on the AngularJS; have a look at my initial posts covering ‘An intro to AngularJS’, ‘data-binding methods’, ‘Modules & controllers' and 'Filters'.

Considering the series is getting a bit longer, but it has immense importance as these tutorials are written in such a way to help you develop the understanding of Angular and its various components. Let’s move towards another important component of AngularJS - Services.

In a layman language, AngularJS Services is a piece of code (either business logic or objects) that can be used by an Angular application. 

Key Points:

• It keeps your controller lightweight & makes logic that would be independent of the controller. 
• Services only instantiated once. (the same instance is used during application cycle).
• Services are not instantiated by default but when a controller refers to services it gets instantiated if it is not instantiated earlier.
• A Controller can use multiple services and one service can also use another service.

Types of Services in AngularJS

1. Built-in Services: AngularJS by default provide core services, such as  $http, $log, $location angularjs etc.

2. Custom-services: These services are developed by developers to achieve certain business logic in the form of service. 

In this blog cum tutorial, we will build custom services and in the next, I will walk you through built-in services of AngularJS. 

Long story short, there are three different ways to develop custom services.

Factory: While creating services, a developer is responsible to create a service name and register the service factory function for the Angular module. Check out how to create your own custom service and call them directly to your controller. 

Sample code

Using the above source code, we can create a service name and register it to the service factory function.

The above source code has factory service that is created under the module. Where call service object with null value gets initiated and assign that service object for all the service members and return the same object. The returned object can be used directly by the controller. It passes the return object directly to the controller as a parameter. 

Once the value is available in the controller parameter then we can easily access the member function of that service as below code sample.

Service: Service is similar to the factory service. But let me tell you How does it make a difference over a selection of the right service. There is a major difference between AngularJs service vs factory service. In the service factory, we don’t need to create an additional service object and a new member function can be added directly to service definition similar to our controller, where we define member function. Also, member function gets instantiated automatically and sends the response to the controller parameter. 

The only difference between service and factory is that service object declaration. Here you don’t need to create an object and Angular takes care of - how member function gets instantiate and send to the controller as a parameter as well as minor syntax changes.

We can go with any of the service/factory.

Provider:  At this moment you must be thinking of What is a Provider in AngularJS. Let me clear you, In Angular Provider is another way to develop custom services. It is one of the core services in Angular in which services and factory are depended on. The provider has a lot of customization options compared to services and factory. Remember whenever we create custom services using factory/service, it automatically gets called to the provider in the background. 

A provider is really helpful whenever there is a service call. It helps you in initializing the configuration before any service call. In this scenario, Provider is the best option. Use Provider only when you need to instantiate some sort of configuration information or use factory/service.
 

Myapp.config provides configuration for service "TaxServiceProvider". Suffix for a service provider with 'Provider'. App configuration gets registered before the controller and services. So next time when the app controller gets instantiated it looks for service. Service is built with the Provider. While in the Bootstrap process, Provider (service) looks for configuration and executes the service.

Let’s start building a sum of two numbers using Services:

In the below source, we are implementing a simple addition of two numbers and business login using services in AngularJS.

Below we have two sources: 

1. an_page.html: Is a view 
2. an.js: implemented factory service
 

Code Explanation: In the View, we are providing two input boxes with one addition button. By default, the value of a and b will be taken up from hardcoded value, which is written directly on the controller.
 $scope.a =20;
 $scope.b =30;

When someone tries to change the value of any of the input fields the view also gets changed.
 

You could also initialize the same in View using ng-init. Instead of writing business logic or the addition of two numbers function inside the controller, create factory service and implement logic in the same.

As mentioned earlier, the basic rule of creating Factory service is to:
 
1. Create a blank object.
2. Assign method to that object
3. Return object so that the same could be passed over the controller as an argument.

an_page.html an.js

Let’s implement the same services using the service method.

As mentioned earlier, we don’t need to create any new object. We can directly add the member to the service. Note that an instance of service is auto-created by AngularJS.
 

& same could be passed to the controller as an argument.

Below is the source code for an.js

Moving to the next methodology of a service creation - Provider. It’s similar to factory service but allows you to add some additional configuration. Here sumServiceProvider is the provider name followed by service name + postfix(Provider keyword) else Angular will never instantiate your service configuration. As soon as Angular find service as a provider, it starts searching for configuration and instantiate some additional configuration.

MyApp.config(['sumServiceProvider', function (sumServiceProvider) {
    ………
}]);

Let’s build our provider service. This is similar to factory service.
this.$get = function () { 
}

The above function gets executed automatically by AngularJS that allows you to implement a service object as well as methods.
 

Source Code:

So far we have learned about different variants of services as well as ways to create a service and when to use them. This installment will give you an in-depth knowledge of AngularJS Services and will help you build a strong foundation. This post is a follow-up to our previous post Filters in AngularJS. Hope you enjoyed reading.
 

GitHub source code: https://github.com/xaiwant/AngularJS-Services

In order to have a strong online presence, it's significant to offer an amazing digital experience to customers. And for this, offering a seamless experience to content managers is extremely important. To achieve this one of very important aspect is making digital assets available at different web properties to editors while they are creating content. These assets should be searchable with meta information as well as other related information. Bynder is one such digital asset management system that allows easy access to your digital file.

Let’s have a look what Bynder is and how to integrate it with Drupal 8 web application to import digital files into content pieces.

First thing first, Bynder is a cloud-based platform that helps marketers to create, find, and use digital content. Every brand that leverages media, graphics, and documents for marketing or sales efforts is a great fit to use Bynder. It is a digital content library that understands the ways in which marketers need to use the content. 

Further, the integration of Bynder with Drupal eliminates the hassle of logging into a different platform to access digital files to content. With this, content managers can use any assets available in their repository system.

Integrating Bynder into a Drupal 8 Site

First, create a Bynder account on www.bynder.com and create API tokens to access the portal using the Drupal module

Module Dependencies:

1. Media Entity: Media entity provides a 'base' entity for media.
2. Entity Browser: This module provides a generic entity browser/selector.
3. DropzoneJS: An open source library that provides drag-drop file uploads feature with image previews.

Library Dependencies:

1. DropjoneJS: Download this library and add it inside the libraries folder.
2. ImagesLoaded: This library detects when images are loaded. Download from https://github.com/desandro/imagesloaded and add it inside the libraries folder.
3. Masonry: It is a grid layout library. Download from https://github.com/desandro/masonry/releases and add it inside the libraries folder.

Installation:

Step 1 Enable the Bynder module via drush - drush en bynder

Step 2 At this point you should be prompted to update the Composer dependencies.

Step 3 Make sure all the packages are installed correctly in your vendor folder - default path is /vendor

Step 4 Bynder needs the "bynder/bynder-php-sdk": "^1.0" . The directory /vendor/bynder/bynder-php-sdk should be present after the composer update.

Configuration:

Step 1 Go to admin/config/services/bynder

Step 2 Fill the configuration form with your Bynder API token details. The details will include Consumer Key, Consumer Secret, Token, Token Secret and Account domain.

Step 3 Save the form to fetch the derivatives and brand information from the Bynder portal

Step 4 The jQuery version should be set to 1.7 or higher for content add/edit pages.

Step 5 Test the Bynder connection from the configuration page and Reload Derivatives. Every time a new Derivative is created in Bynder side, derivatives reloads on the Drupal site.

Step 6 Bynder provides a default media entity that can be referred to a Drupal content-type. Select Bynder and image media type as shown in the below       

            screenshot.

Step 7 Create an entity browser to upload and select Bynder media:

Create an entity browser from “/admin/config/content/entity_browser” and then select the entity browser from Manage Form Display (/admin/structure/types/manage/article/form-display) for the content-type in which you want to select images from Bynder. 

Step 8 Attach Bynder media in a content.

A Bynder media can be added to a content from the node add/edit form. The entity reference field stores the references to Bynder assets. A popup opens by clicking the upload asset button. Go to the Bynder Search Tab and select an image. 

Note: Log in to the Bynder repository to upload an image from node creation form.

Step 9  Uploading an image to Bynder

Through Bynder’s uploader widget, you can also upload images from Drupal to the Bynder Repository.

That’s it. This is how Bynder, a data asset management system, is one such tool that eases content management work of any publishing house. I believe after completing this tutorial, you will have a better understanding of how Bynder works? How to install and configure it? Once the setup is completed upload images to your Account Domain and starts using those on the Drupal site.

Componentization has become a growing consideration in most of the web application development firms. The reasons are obvious, instead of reinventing the wheels again and again, why don’t we re-use them. This article will help you to understand the importance of componentizing your Drupal front end and how you can achieve that using Pattern Lab.

So what is Componentization?

In front-end perspective, components are a collection of HTML, CSS, and JS that combines together to form a display element and Component-Driven Development (CDD), a development methodology by which the web pages are built from the bottom up. 'Componentization' is the process of breaking things down into small and easily identifiable pieces, a practice used by developers and designers alike to solve complex problems.

Why should you follow component driven front-end development approach?

1. Allows for re-use of Components

2. A component-based UI approach accelerates the development

3. You can completely decouple the front-end development

4. Testing becomes easier

5. Parallelize development

6. Flexible project workflow

How to use component driven front-end development approach In Drupal?

One of the most popular tools for component driven front-end development is Pattern Lab. What makes Pattern Lab so famous is its flexibility in pairing up with the Atomic Design methodology. Addition of twig templating system in Drupal makes it easier for us to integrate Pattern Lab with Drupal. Although many starter kits for Pattern Lab with Drupal 8 are available, I personally find Emulsify the most useful one. Emulsify is a starter kit for Pattern Lab based theming created by Fourkitchens.

Integrating Emulsify with Drupal

Let me explain how you can use Emulsify for componentizing your Drupal front-end development. Emulsify is a Drupal 8 starter kit theme, which means we install Emulsify and tweak it to meet our needs rather than creating a subtheme out of it.

Before installing Emulsify, there are certain prerequisites which need to be met:

1. Node

2. Gulp 

3. Composer

4. Components Module

Installing Emulsify:

Step 1: Emulsify can either be installed using composer or you can directly download Emulsify and place it in your themes directory. 
For installation using composer: composer require Fourkitchens/Emulsify.
Step 2: You can rename the downloaded Emulsify theme to suit your project if needed.
Step 3: Move the Unified Twig Extension module from the Emulsify to modules/unified-twig-extensions. 
Step 4: Enable the Emulsify theme, unified-twig-extensions and components module.

Step 5: Run ‘npm install’ from the Emulsify theme directory.

Step 6: Run ‘composer install’ from the Emulsify theme directory.

You will now have a working theme based on Pattern Lab. 

Now, Let’s create a simple component in Emulsify

Step 1: Run npm start from terminal

Your terminal screen would look like this

A Pattern Lab instance will be created. Access URL’s are displayed on the screen. This process would take care all of the tasks like compiling the sass to CSS and updating the living style guide. Your Pattern Lab instance would look as below.

Step 2: Create Component

Certain components are built within Emulsify by default. Let's create a view that will display article teasers. We will be using the card component which is in the Emulsify theme.

Step 2.1 Create a view which displays the article teasers
Step 2.2 Override node template for article teaser view mode.

Here we are including the molecule 01-card.twig.

Step 2.3 Override the view template for our articles-list view

Here we are extending the card-grid organism for the necessary wrapper div.

Now clear the cache and view the article list view page. You will be able to see a nice gird card with the contents you added for the article.

So now you know how to isolate front-end workflow in Drupal using Pattern Lab. If you have any suggestions or queries please comment down let me try to answer.

Below is the presentation on "Contentization of front-end workflow in Drupal 8 using Pattern Lab".

This is the fourth post in my series on the AngularJS; check out my initial piece covering ‘An intro to AngularJS’, ‘Data-binding methods’ and ‘Modules & controllers’.

In Angular, Filters are used to format/search functionality in AngualrJS/transform the data. Angular provides default formatter that allows you to display the data in a formatted way to your view or pass the same for the input of another variable. By default, Angular has a list of Filter component in AngularJS and they can be added to your data by including a pipe (|) with expression.

• Uppercase
• Lowercase
• OrderBy
• Number
• Date
• Currency
• Filter
• JSON
• LimitTo

Let’s explore each of them. 

Uppercase:  Format the data in Uppercase.

Sample code: 

Logged in User Details
                       

        
 {{n.name | uppercase}}
    

Uppercase passed in Controller:

We can pass the Filter to Controller by adding $filter argument in controller function. We already have a javascript function to handle uppercase and the same can be achieved in AngularJS as well. Below source code will let you pass the filter in the Controller.
 

Output:

Hello World
HELLO WORLD
HELLO WORLD

Response: The above source code format the username in uppercase.

Lowercase:  Run the following code to format the data in lowercase.

Sample code: 

Logged in User Details
                       

        
 {{n.name | lowercase}}
    

Response: The above source code format the username in lowercase. See the screenshot below.
 

Lowercase passed in Controller:  

You can also pass the filter in a controller by adding $filter argument in controller function. Javascript function handles lowercase. Similar to Uppercase, the same can be achieved in AngularJS.  
 

Output:

SAY HELLO TO NEW WORLD ANGULAR!
say hello to new world angular!
say hello to new world angular!
 

Orderby: Suppose you have a long list of user data: first name, location, job, salary. But when it comes to rendering, how would you like to filter the data in your view? Based on salary/firstname/location. Using orderby, you can achieve this. Have a look at the below code and the result.

Sample code:

    

        
{{ns.name + ', ' + ns.city}}
     

Response: In the above source code, I have filtered the user data based on the city so the response would look similar to this.

number: It formats data by returning number value in a string. 

syntax: 

 {{ expression | number : fractionSize}}

Here we have expressions that we are formatting the data into a string. With numbers, we have additional parameter fractionize that tells how many digits you can display decimal numbers.

Sample code: 

Result: 

What if we add price as 707.6758956 and fractionsize: 2

By default, it prints first three digits after decimal point. By adding fractionsize, you can display the number of values of your choice after the decimal.  

Will print till next two digits after decimal places.

Input: 77757.677876543
Output: 77757.67

It also prints infinite value when we have something like. 

input: 77754323467876432456787654356898765432456787654356787654307.677876543
Output: 7.775e+58

Date: This filter transforms a string date into a human-readable format as listed below: 

• yyyy: 4 digit numeric year representation.  e.g: 1989, 2017
• MMMM: month name in string format e.g: January, November
• MMM: first three letter of month e.g: JAN, MAR, FEB, DEC
• HH:  24 hours time format e.g: 24, 01,17
• mm: minutes in double-digit format. e.g: 34, 59

Similar to that there are various formatters in AngularJS official documentation. https://docs.angularjs.org/api/ng/filter/date

Syntax:
 {{ DateExpression | date : format : timezone}}

Here DateExpression is a timestamp. 
The format of an optional parameter. String either would be medium, short, full date, long date etc. by default it takes medium Date.
timezone is also an optional parameter that is used for formatting. e.g: +0530, +0430.

Sample:  {{1288323623006 | date:'medium'}}Result: The above codebase is printing medium date format includes MMM d, y h:mm:ss a
 

Currency: Add Currency prefix. By default, it takes location currency symbol. 

Syntax:   {{ expression | symbol : fractionSize}}

Expression is the amount that needs to be manipulated.

Symbol: It is an optional parameter. Placeholder for currency symbol e.g: USD, $, ₹
Fractionsize: It shows a number of digits after the decimal. Add 0 if you do not want to display any value after the decimal.

Sample code: {{20000000000 | currency: "₹" }}
result:   ₹20,000,000,000.00

Filter:  Technically, Filter is used to return a new array when an item is found. It is also used to get the matching element from the array.

Syntax:    {{ filter_expression | filter : expression : comparator : anyPropertyKey}}

filter_expression: source array
expression: element that you are looking for whether string, object, function.
anyPropertyKey: Is an optional parameter. Element needs to be searched.

In the below codebase, we have filtered the output data based on name having ‘i’ and gender ‘m’. Passing multiple filter value treat as & operator. Change the filter value to get the desired result.

Sample code: 
 

Output:   
Jani,m
Birgit,m

Demo Dynamic User Filter Codebase:

Json: Converts javascript objects to JSON. Primarily, it is used to debug the applications.

Syntax:  {{ expression | json : spacing}}

expression :  data to be filtered.
spacing: indentation . default is 2.

Sample code: 

The below source code formats the data in JSON format with indentation is set to 8.

Output:

{
        "name": "Alfreds Futterkiste",
        "city": "Berlin",
        "country": "Germany"
}

LimitTo: This filer returns a string or array having a specific number of elements. The counting number of character in the string, array or digits can be taken from either from the beginning or the end.

Syntax:  {{ expression | limitTo : limit : begin}}

expression: containing array,string, number  etc.
Limit: It returns string length. If it’s in –(negative) then it will start from the end or else from the beginning.
Begin: It is an optional parameter and used to offset from the end of input. The default is 0.
 

Sample code: 

Output:

Try to change the beginning and limit value and see the response.

eraser
sharpener
tape

So far we have gone through almost all the filters provided by AngularJS. Hope you must have used them in real time scenario. In case you have any question or suggestion then please comment below.

Codebase: https://github.com/xaiwant/AngularJS-Filters
 

Many of the clients we help with developing web applications have been asking about General Data Protection Regulation (GDPR), the European Union’s new suite of data privacy law in 20 years. So we decided to provide information as clear as possible about - How does GDPR relate to a Drupal website? How to make Drupal site GDPR compliant? Are there any modules that will help me with it?  

Unsure about GDPR? Let’s dive in to the basics.

According to EU GDPR, GDPR is “designed to harmonize data privacy laws across Europe, to protect and empower all EU citizens data privacy and to reshape the way organizations across the region approach data privacy.”

The new regulation, which will come into effect on 25 May 2018, applies to data collected about EU citizens from anywhere in the world. As a consequence, a website with any EU visitors or customers must comply with the law. Have a look at the publication of the regulations in the Official Journal of the European Union in order to have a better understanding. The penalty for non-compliance can be 4% of annual global turnover, up to a maximum of €20 million.

So how does GDPR relate to your Drupal website?

Any information, such as name, address, email address, social security number, IP address etc., related to identifying a living person directly or indirectly is classed as personal data. Since most companies gather users information through forms for email marketing or CRM extensions in this case their site will be affected. Further, any form that deals with the commerce of any type is affected.

Steps to make your Drupal site GDPR compliant

• Data collection and storage: Article 12 of GDPR, Right of access, states that before collection of data places or before a user submits the form, they must be aware of that the form on your Drupal site is collecting their personal information with the intention to store it.

• Inform the user: Users should be aware of which of their data will be stored and use, how, where, and for what purpose. To make things simple in your form, fully disclose your data collection and storage practices in the privacy policy.

• Keep user data organized and accessible: According to Article 17 of GDPR, Right to erasure (right to be forgotten), users must have an option to erase personal data, stop further collection and processing of the data that concerns him or her. At the same time, users should be able to download their personal data for which they have earlier given permission. Further, on request, companies should be able to provide a user with a copy of all personal information they have on them, free of cost within 40 days and delete the info on request.

• An open channel for users request: Your Drupal website must have a simple form for consent withdrawal and/or request to view on your privacy policy page to allow users contact the company in an easy way. Setting up an email action that sends the notification to you each time the form is submitted is the best way to know happenings.

• Communicate privacy information: Review your current privacy policy and mention clearly for making any necessary changes after the implementation of GDPR. under the new regulation, you need to explain how you process the data, data retention periods and that individuals have a right to complain if they think there is a problem with the way company is handling their data.

• Individuals’ right: Through Drupal’s GDPR module, we ensure your website includes the following rights - the right to be informed; the right of access; the right to rectification; the right to erasure; the right to restrict processing; the right to data portability; the right to object; and the right not to be subject to automated decision-making including profiling.

• Breach notification: In case your Drupal website ever experience a data breach of any kind, the information on the same must be communicated to all of your users within 72 hours of becoming aware of a breach.

• Google Analytics: As per the law, if you are using Google Analytics it means you are data controller, and can decide which data should be sent to Google Analytics and not. In order to be GDPR compliant with Google Analytics, you need to follow certain guidelines, like: 

  Auditing data for personally identifiable information (PII)
  Turning on IP anonymization
  Auditing collection of pseudonymous identifiers (hashed emails, user IDs)
  Updating contract, privacy policy on the website
  Building an opt-in/out capability

• Modules: While developing a website, we ensure that your site is integrated with different auditing modules, such as for performance, security, or a general review to check the overall status of the site. A security audit on your Drupal site reveals how data is being processed and stored on your servers, and steps that are required to comply with the GDPR.

Are there any Drupal modules that will help the website with EU compliance

In short, Drupal community has come up with General Data Protection Regulation module that gives users visibility to their stored data. As an owner of the site, it's your responsibility to deal with the organization inner workflow of dealing with customers data. Not to mention Drupal’s GDPR module can be a Kickstarter to go through checklist points to maintain the privacy and security of an individual. Further, configuring the site plays an important role.

With the integration of GDPR, users will be able to view what are the information stored about them, can correct all the stored data themselves, opt for “forget me” action from the site, can remove the account (but not the content). In addition, the updated version will have more items and recommendations on the checklist.

Okay, so now you know what GDPR is and how you can make your Drupal website GDPR compliant. Understanding how to adhere to these rules confounds many people, but it's an essential part when your customers are from EU. Our intention here is to inform. We will try our best to keep you updated as the regulation move towards implementation. 

Still worried how you go about making your site GDPR compliant? Drop a mail at info@valuebound.com and let our Drupal 8 experts help you with your queries.

Have you ever been in a situation where you were required to generate PDF of HTML code? Recently, I came across a similar situation. In Drupal 8, there are several PHP libraries that allow you to generate PDF. However, out of curiosity, I thought of finding better alternatives. After some research, I found an interesting library, called mPDF, that converts HTML code to PDF without changing the structure.

mPDF is a smart library that considers the CSS attached to the HTML. Not only CSS, it takes care of almost all the HTML tags like form tags, tables, images, lists etc.

Generating PDF of HTML in custom module

Requirements

mPDF 7.0 requires PHP ^5.6 || ~7.0.0 || ~7.1.0 || ~7.2.0. PHP mbstring and gd extensions

Installation

Step 1 Download mPDF via composer and its packageist package mpdf/mpdf.

Step 2 Run the following command in the Drupal root directory: 

$ composer requires mpdf/mpdf

Step 3 Once the mPDF libraries install generate the pdf in the custom module.

Step 4 In custom module, create a controller with routing path(/pdf-download)

Step 5 Now hit the URL (/pdf-download) to download pdf

Whenever you hit the URL, pdf will automatically get downloaded. Further, the HTML which we wish to print can be passed dynamically too. For example, by passing the node contents, we can download the node contents in a pdf file.

Hope you can now generate PDF from encoded HTML in the custom module. If you have any suggestions or queries please comment down let me try to answer.

Over the period of time, website performance degrades significantly affecting the business in terms of traffic, sales, marketing etc. And there can be n-number of reasons for the poor performance of the website. In this scenario, performance enhancement is one of the solutions to keep your website as well as the business running efficiently.

Well, there are various tools to debug the performance of web applications. In case your website is running on Drupal 8, then you need not worry as there are various contributed modules that help to identify the reasons and debug the site. Here we will explore how Web profiler helps in enhancing Drupal 8 site performance.

Below are the most used and trusted modules that helps to debug site performance. It will also help you to learn how your site handles page requests

So what is Web Profiler

Web Profiler is a Drupal 8 Contributed Module (now a sub-module of Devel). It is built on the top of Symfony Web Profiler component. Hence, this component is a must for web profiler module to work.

Integrating Web Profiler with Drupal 8

Since Web profiler is a sub-module of Devel, we need to download the Devel and install the web profiler.

After enabling Web Profiler module, it renders a fixed bar at the bottom of each page for users.

Web profiler also provides permission for each role - The View Web Profiler toolbar permission. With this permission, you can decide which user you want to show the toolbar.

It also provides the configuration page (Go to Configuration -> development -> Devel settings -> Web profiler) where you can do all sorts of configuration related to toolbar items, IDE settings.

Select the checkbox in configuration page to fix which items should be displayed at the bottom of each page.

By clicking on any of the items at toolbar, you will be taken to the full profiler output.

In full profiler, we can see vertical tabs. Check out the description of each tab below.

PHP config - This section gives information about PHP configuration on your server.

Request - It provides information about page request. Cookies, request and response headers as well as server parameters are also provided.

Timeline - This is nothing but a graph which gives information about the controller, events that are called for particular page request and how much time they have taken to compile.

Database - It gives a list of all the queries, which are executed for a particular page request.

User - This section provides information about logged in user i.e name, authentication, roles.

Views - It shows a list of views that were rendered on the current page with their respective build time, execute time, and render time.

Blocks - This shows a list of blocks that were rendered on the current page.

Forms - This section lists the forms built on the current page.

Extensions - This section lists all the modules and theme that are enabled on your site.

Cache - This section lists the different caches and the respective number of hits or misses.

Install Libraries to render timeline

Web Profiler requires two javascript libraries to render the timeline and to syntax highlight collected queries. In Drupal 8, these javascript libraries are optional and work without even installing them.

• Highlight.js

Highlight.js is used to highlight the syntax of queries.

Create /libraries/highlightjs/ directory inside your Drupal root directory.

You can download the library from http://highlightjs.org and copy js and styles folder from downloaded folder and place in /libraries/highlightjs.

• D3.js

D3.js is used when viewing the timeline page.

Download the D3.js from https://github.com/d3/d3/archive/v3.5.17.zip and place in /libraries/d3 folder.

Note: Web Profiler module requires D3 library 3.x (not 4.x) to render data.

Displaying Timeline

• Add the following codebase to your settings.php or settings.local.php in order to display the details of Web Profiler on the timeline page.

• The codes are also available in /devel/webprofiler/README.md.

         $class_loader->addPsr4('Drupal\\webprofiler\\', [ __DIR__ . '/../../modules/contrib/devel/webprofiler/src']);
         $settings['container_base_class'] = '\Drupal\webprofiler\DependencyInjection\TraceableContainer';

• Remember that the code above assumes, you’ll add the devel module at /modules/contrib/devel.

IDE Integration

In detailed profiler view, the class name is mentioned.

Each class name is linked to open the class in an IDE. Click on the link to open class in defined IDE. The setting is available in module configuration page.

Configure the following URLs to work for your IDE.

• Textmate

          Use txmt://open?url=file://@fileline=@line

• PhpStorm 8+

          Use phpstorm://open?file=@fileline=@line

Well, there are various ways you can debug Drupal 8 website performance, including web profiler. Alternatively, you can explore caching methods as well as other techniques.

Hope this blog will be helpful to you. Comment below if you still face any problem with performance enhancement. Will be happy to answer your question.

Below given is a presentation on debugging Drupal website using Web Profiler.

Sometimes we need to implement a search functionality that looks similar to some of the renowned e-commerce site search (like Amazon, Flipkart and so on) as per the category, types and all.  For this kind of search, Facet is a good option. So what exactly Faceted search is?

Facet is a module, in Drupal 8, that provides a facility to arrange all the search results as per the category. Basically, it is an arrangement of search results based on categories, content type on indexed terms and content type.

Why we use Facets?

There are various reasons a Facet can be used:

• It provides a drill-down search facility.
• It can be used with default search and Solr as well.
• It shows a number of item count for each category.
• Facet provides a wide range of configurable setting in UI and so on.

Why Solr?

‘Speed’ is crucial for any website as well as for search engines success.

So the question here is how can we keep our Drupal system search fast when it has ’millions of content (like pages, nodes)? The answer is Apache Solr.

Faceting with Solr:

Solr supports a range of Faceting:

1. Field faceting - Retrieve the counts for all terms or just the top terms in any given field. The field must be indexed.

2. Range faceting – It can be used on any date field or numeric field that supports range queries. There are some parameters for range Faceting. For more, check Solr Ref Guide 6.6

3. Interval faceting - It allows users to set variable intervals and count the number of documents that have values within those intervals in the specified field.

4. Query faceting - This faceting returns a number of documents in the current search results that also match the given facet query.

5. Pivot faceting - It allows to break down the values by category and sub-categories.

Require Modules for Faceted-Solr:

Module to uninstall:

• Search

Modules to install:

• Facets
• Search API
• Search API Solr Search

How to use Apache Solr with Facet:

Follow the below steps to use Facet with Solr:

1. Create a Solr server: First, create a Solr server in your system. In order to have a better understanding, check out how to configure Apache Solr with Drupal for better content search.

2. Install Required Modules:

In Drupal 8, Composer is now a standard to include external PHP libraries.

The Search API Solr module requires Solarium codes, which is not included in the module repository. So if you download this module directly from drupal.org and put the module in your Module folder then it will show the Solarium Libraries missing error at the time of module enabled. So I recommend installing all the dependencies of a module via Composer.

Run the following commands to overcome this libraries dependency issue:

1. $ composer config repositories.drupal composer packagist.drupal-composer.org
2. $ composer require "drupal/search_api_solr 8.1.x-dev" (latest stable release)

After completing the above process, make sure you have all the required modules (Search API, Search API Solr Search and Facets ) in your module directory. Install all the required module from UI or using the drush command.

Note: You need to uninstall core “Search” module if you are not going to use that else it will conflict with solr and Facet search.

3. Configure Solr Server on the site:

Go to Search API configuration page (Configuration >> Search and metadata >> Search API). Here I am using the default Solr server, but you can create your own server by clicking on “Add Server” button.

So I did some changes in configuration for default “Solr Server” by clicking on Edit link. Configuration changes similar to this:

After making the changes, visit the server status page on click on “Solr Server” link or from ‘/admin/config/search/search-api/server/default_solr_server’ path. If everything goes fine then you will find a pop-up box with the message “The Solr server could be reached” and “The Solr core could be accessed”. That means your Solr server connection is done successfully. Now you can use it.

4. Configure Search Index:

After configuring, Solr Server, you need to configure the Solr Index also. The Solr Search creates a default content index containing all published nodes. You can modify the configuration as per your requirement. To do this, click on the Edit link of “Default Solr content index”.

5. Indexed Content

To check whether the index is working properly or not, click on the Search Index title (like Default Solr content index). You will find the indexed status and you can re-index all data from here also. Before re-indexing, you need to click on “Clear all indexed data” and then click on “Index now” button.

6. Solr Search view page:

The Solr search module creates a default view page for search results, which can be accessed at ‘/solr-search/content’.

7. Facet configuration:

You can configure Facet by visiting ‘/admin/config/search/facets’ path or from “Configuration >> Search and Metadata >> Facets”.

Create new Facet by clicking ‘Add Facets’ button. Here I am creating a Facet name Content type facet by following the below steps:

• Click 'Add facet'.
• In ‘Facet source’ drop-down box, choose the 'View Solr search content, display Page'.
• Select “Content type (type)” in Field drop-down.
• Name the facet 'Content-type'.
• Click on ‘Save’ button

After creating Facet, you can do some basic configuration like:

• Select ‘Show the amount of results’ checkbox to display the count of results.
• Select  ‘List item Label’ checkbox to display the labels of Content type instead of Machine name.
• Do some other configuration as per your requirement.
• Click on ‘Save’ button

The facet provides a block that can be placed in the theme region from Block layout. Here I have placed that block in Sidebar First region on my website. To place the block, click on the ‘Place block’ button from that particular region and search the block there.

Here I have created Facet with the name the ‘Content-type’ so that you can find a block with the similar name as Facet. After placing the block in that particular region, visit the search page at ‘/solr-search/content’. Here the facet block looks similar to the below screenshot:

Have you used Faceted search earlier? Is there anything you'd like to clarify or see further clarified about Faceted search? Let me know in the comments!

References:

Faceted Apache Solr Search with Drupal 8

Faceting - Apache Solr Reference Guide

Tutorialspoint - Apache Solr - Faceting

Lucidworks - Faceted Search with Solr

This is the third post in my series on the AngularJS

Before having a look at AngularJS’ components, terms and terminologies, let’s make sure everyone is on the same page. If not then you can go through our previous blogs “Introduction to AngularJs” and “Data-binding methods in AngularJS” to have a clear understanding of binding technique and when/where these can be used for a better result.

When we talk about AngularJS, we come across many new terms and terminologies such as Angular module controller, and others. So why these modules and controllers are called building blocks of an Angular application. And what are the use cases?

First thing first, let’s start with the main objective of this post. Do not worry when you will complete this blog, you will have an intermediate level of expertise on AngularJS modules & controllers. 

In the  previous AngularJS Tutorial, titled Data-binding in AngularJS, you might have noticed  the source code similar to the one mentioned  below:

angular.module(name, [requires], [configFn]);

Parameter
name: Name of the module.
requires:  is an optional parameter, if mentioned the new module gets created. If not, an existing module is being retrieved.
configFn:  is an optional parameter, execute a function on module load

The universal way to create or register the module with Angular is Parameter. It has a suite of services, controllers, services, configuration & directives. In other words, you can consider it as a main() function to initialize and get chained with variables and methods for an application. 

Sample code:

Var MyNewapp = angular.module(“MyNewApp”, []);

Code simplification:  We are using an Angular object to create the module. Here you will also find two parameters of angular.module, the first parameter is the name of a module and second refers to a blank array. 

Remember, there could be a scenario when your custom module will be dependent on another module. In that situation, you can pass that module over the Angular module function as a parameter and utilize its resources.

Use: To bootstrap an Angular application, declare ng-app name on your page. 

In the above source code, the

  
    
var ControllerName  =  function ($scope) {
   /* variable initialization goes here */
}
    
   

 
   
Myapp.controller(“'myCtrl'”, function($scope) {   
   $scope.firstname = "Jaywant Topno";
});