Shamsher Alam

Shamsher Alam

Recent Posts

Drag-&-Drop Custom Layout Builder

Posted by Shamsher Alam on Oct 13, 2017 3:03:00 PM

The Custom Layout Builder is an application that allows a developer to create an HTML  page. The application provides a Grid layout, API and UI  that can be used to create a webpage. The developer need not write code. The code is auto-generated.

You can check out this quick demo to get started.

Features

Various functionalities that the layout builder provides are:

  • Drag and drop columns & rows – Depending on the screen layout requirements

    drag1
  • Resize, delete and add columns – Depending on the content of the columns using the different icons

    drag2
  • Adjust layout depending on type of screen – phone, tablet and desktop

    drag33
  • Quickly edit the source code directly – Code is generated and can be viewed on the click of the '</>' icon. This can be accessed by the developer and modified as per requirements

    drag4
  • Content in the columns can be added using TinyMCE.

  • Pluggable CSS Class and ID Framework. Developers can add their own classes within the code using the icon. As of now, there are a couple of classes that can be auto-generated.

  • Deletion of code that is not required.

Software Components

  • TinyMCE – A WYSIWYG Editor that allows the user to add text, tables and format content.

  • JQuery – A javascript Library used to implement the layout builder

  • HTML – To develop the layout builder 

  • Font awesome – Library that is used to get the icons, customize them and add relevant CSS.

  • Bootstrap.js – Library that allows incorporating jQuery and jQuery Grid Library plugins.

  • Jquery Grid Library – Allows to generate source code for grid operations like insert, filter, delete etc


Assumptions: None

Open Issues: None

You can find the Custom Layout Builder on GitHub and start using it right away.

If you have any queries about the Custom Layout Builder or feedback you would like to share, please let know in the comments below.

Topics: Drupal, QA and Testing

How to Send Dynamic Auth Request with Postman in Drupal REST

Posted by Shamsher Alam on Sep 11, 2017 1:04:00 PM

RESTful is a wonderful little module that provides a solid object oriented base for implementing a REST API in Drupal. I have used both RESTful and services to create APIs and at the moment I prefer to work in RESTful – though the class based PHPoop approach is really vital to both. The maintainers are conscientious, in-tune with API best practices and write quality code. I encourage you to contribute to their project by reporting issues, contributing code in pull requests in GitHub and most importantly using this great module.

However, there are two issues that I have always faced with REST:

  • How do I send auth request in Drupal REST api?
  • How do I send user session with every authenticated web request in Postman tool?

Now, there are two ways to resolve these issues:

  • One is, we can use the drupal_http_request function to consume the data and use it. But that would require a lot of customizations and in the long run would be very difficult to maintain.
  • Alternatively, we can use the Postman tool auth request.

In this blog, I tried to put together the steps for the second solution. Here is how you can send dynamic session request for next authenticated request using the Postman test script:

Before we start, enable the following modules:

Image 1.png

  • Web Service - Handle all web service core and custom
  • Web Service Authentication – It enables to add the web service authentication request
  • Web Service Server – REST Server or XML-RPC server parser

Download Google Chrome Postman extension application.

For this purpose, I have used Drupal 7 and the Services module. The first step would be to download and install the Services module and enable the REST Server module that comes with it.

Step 1: Add service

To create a service, you have to navigate to Service UI (admin/structure/services), click "add service", and enable session authentication for a user request.

new_end_point.png

Step 2: Edit the Resources Page

The "Open Resources" page will show Drupal core default service list like node create, user, taxonomies and file creation. You can also create your own custom web services using service module API.

Now edit resources.

image 3.png

Resources are available in default setup where all resources come with the Services module. You can choose or enable any default services end point for accessing web request.

image 4.png

Edit response method and format after request

image 5.png

Step 3: Send Authenticated Request

Now time to check web services and send the authenticated request. (api/user/login)

image 6.png

Store user session value in a variable using Postman script under tests tab. Write Postman tests script before sending request because when you will send web request, so post script will run when you will get data and save session value from response. (See screenshot for reference)

Image 7.png

This is the code example of Postman script before sending web request, and store session value from the response.

image 8.png

Node creates or next web authenticated request from Postman and uses user session values. Follow these steps to send next authenticated request (see screenshot for reference).

image 9.png

JSON value format for sending node values with web request

image 10.png

Drupal node create with author information.

image 11.png

User logout and destroy Drupal session.

image 12.png

You can download sample Postman request from GitHub

If you found this helpful, you might want to check out our range of tech webinars as well.

Topics: Drupal, API Management

Discussion

Write to us

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms Of Service apply. By submitting this form, you agree to our Privacy Policy.

See how our uniquely collaborative work style, can help you redesign your business.

Contact us