Skip to main content

Form beautification in Process Cloud Services (PCS)

 

Using Custom CSS to make the form look cooler.

Introduction

In this blog I will be explaining about creating custom CSS to make the pcs form look better.

Main Article

In this post let’s make the form look more appealing.

In the below screenshot as you can observe the initial form looks old school and doesn’t look much appealing.


And the beautify options provided by the PCS by default are very basic.

We can overcome this by having a custom CSS of our own and make the form look more appealing to the customer.

Follow the below steps in order:

1.     Go to the form you have developed.

2.     Under form properties go to form properties



3.     Click on the upload

4.     Select the custom CSS file you had developed.



5.     The form gets change to below screen shot



 

As you could see we had changed added sample logos to the fields which is not possible by default and changed the background color as well.

 

The CSS code used above:

input[name=items] {

  width: 80%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

  border:2px solid DodgerBlue;

  background-image: url('https://cdn-icons-png.flaticon.com/512/151/151773.png') ;

    background-size: 10px;

           background-repeat: no-repeat;

}

 

input[name=name] {

  width: 80%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

  border:2px solid DodgerBlue;

  background-image: url('https://toppng.com/uploads/preview/mail-icon-11549825367za0blj7xnt.png') ;

    background-size: 20px;

           background-repeat: no-repeat;

}

 

input[name=quoteDate] {

  width: 80%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

  border:2px solid DodgerBlue;

    background-size: 20px;

           background-repeat: no-repeat;

}

 

 

input[name=reviewNeeded] {

  width: 80%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

  border:2px solid DodgerBlue;

  background-image: url('https://www.freeiconspng.com/thumbs/review-icon-png/review-icon-13.png') ;

    background-size: 20px;

           background-repeat: no-repeat;

}

 

 

input[name=validateDate] {

  width: 80%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

  border:2px solid DodgerBlue;

    background-size: 20px;

           background-repeat: no-repeat;

}

 

input[name=amount] {

  width: 80%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

  border:2px solid DodgerBlue;

  background-image: url('https://www.freepnglogos.com/uploads/dollar-sign-png/dollar-sign-dollar-symbol-signs-icons-1.png') ;

    background-size: 20px;

           background-repeat: no-repeat;

}

 

 

body{

          background-colour: #edf033;

}

 

 

 

Hope you all will utilize the Advanced CSS option and create more appealing forms in future.


-Preetham Konjeti


Labels:

Comments

Post a Comment

Popular posts from this blog

Convert App based Integration to Scheduled Integration without wrapper in OICS

we all know that converting a scheduler integration to REST is quite easy , where as the reverse is not possible and the only way to achieve it is through creating a wrapper scheduler integration and invoking the trigger one as child from there. But there is another way through which we can achieve the direct conversion. For that please refer to below example. Note : Every step mentioned has to be done very carefully Create Scheduler Integration. I’ve created a base one in which it invokes a SOAP service.  I’ve created a small trigger integration which I’m going to change to scheduler without any wrapper. Please follow the below steps to convert rest based to scheduler:     1)    Export the integration.     2) Rename the iar file to zip.     3) Now unzip the file.     4)    Compare the properties files of both scheduler and rest based integration and make the changes to rest based as per the scheduler integration After changes Now open the resources folder: Move the scheduler resour
Post a Comment
Read more

ChatGpt X Oracle Digital Assistant Integration

  Introduction In this article I will be explaining about integrating the ChatGpt with Oracle Digital Assistant. NOTE : This is not a suggestion to have ChatGPT in your ODA, this article is just to showcase the flexibility of the ODA to easily integrate with anything. Main article ChatGPT ChatGPT is an AI language model developed by OpenAI, capable of processing natural language input from users and generating coherent and relevant responses. It has been trained on an enormous corpus of text data using unsupervised learning, allowing it to generate responses that are not just grammatically correct, but also contextually appropriate and engaging. ChatGPT is particularly useful in scenarios where there is a need for rapid and accurate responses to user queries, such as in customer service or personal assistants. However, it may struggle to generate appropriate responses in certain situations and may not be suitable for scenarios requiring a high degree of personalization or cus
2 comments
Read more

Backup Integrations of an Instance with a single click using OIC

  Introduction One common mistake that most of OICS developers make is not taking the backup of their integrations religiously and if they want to take backups clicking on the export of the integrations individually could be quite tedious. Main Article In this blog I will be explaining about automating the backup process in OICS. Below is the order of the steps that are to be followed: STEP:1 1) Configure a Rest trigger connection as shown below. Provide the below payload in the request section:     {   "IntegrationName”: "" } STEP:2   Configure the new rest connection as mentioned below. (This basically list downs all the integration details as per the provided name).   Provide the Query parameters as below:   Provide the response payload as below: {   "hasMore" : "false",   "items" : [ {     "id" : "",     "name" : "",     "lockedFlag" : &quo
Post a Comment
Read more