Visual Force Page in Webstorm

Brooks Johnson

unread,

Aug 2, 2018, 4:35:07 PM8/2/18

to Illuminated Cloud General Discussion

I am trying to write my first Visual Force Page in Webstorm with IntelliJ. And I seem to be totally stuck on beginer level issues. I have only done visual force from the Dev Console before.

1. When I hit preview how do I append an Id on the end to see sample data. The URL is different that the dev console and if I add &id= I get an error.

I put in in some sample CSS to test the link to the style sheet and nothing is happening.

<!--
 - Created by Brooks Johnson on 8/2/2018.
 -->
<apex:page standardController="Region__c" title="Regional Health Report" showHeader="false" sidebar="false" docType="html-5.0" standardStylesheets="false">
    <head>
        <title>Regional Health Check </title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"/>
-->
        <link rel="stylesheet" type="text/css" href="healthcheck.css"/>
    </head>
    <div class="container-fluid">

CSS

h1{
    font-size: 22px;
    color: blue;
}
h4{
    background-color: brown;
}

Thanks for taking the time to help.

sc...@illuminatedcloud.com

unread,

Aug 2, 2018, 4:42:51 PM8/2/18

to Illuminated Cloud General Discussion

Brooks, as you've pointed out, IC previews a Visualforce page with no additional query parameters. The first query parameter should use "?id=" and not "&id=". The latter should only be used to chain additional query parameters, e.g., "?id=someId&action=doSomething". That's likely the first issue.

As for the stylesheet you're trying to include, is that set up as a static resource? The link tag you're using makes it look like it's trying to access a file named "healthcheck.css", but how is that deployed to Salesforce? I'd also expect to see it use the apex:stylesheet tag to ensure it's included in the header properly:

<apex:stylesheet value="{!URLFOR($Resource.healthcheck)}"/>

Let me know if all of that doesn't help.

Regards,

Scott Wells

Brooks Johnson

unread,

Aug 2, 2018, 5:12:04 PM8/2/18

to Illuminated Cloud General Discussion

Great help. I can get my data now. I did not deploy the style sheet to Salesforce. I was hoping to be able to write my HTML and CSS side by side and test as I go.

Do I need t do an internal stylesheet to do that with IC and Webstorm?

sc...@illuminatedcloud.com

unread,

Aug 2, 2018, 5:19:08 PM8/2/18

to Illuminated Cloud General Discussion

The Visualforce page is being rendered by Salesforce, not a local Web server. As a result, for the stylesheet to be found when it's rendered, it will need to be deployed into Salesforce. The standard way to do that is to add it as a static resource of type text/css or as part of an archive-type static resource (useful when you have a number of CSS/JS/image/etc. resources that should be bundled together), and IC provides the resource bundles feature to support the latter use case. IC can deploy all of this to the server together for you as you modify them in the IDE.

Regards,

Scott

Alex Sutherland

unread,

Aug 3, 2018, 10:38:48 AM8/3/18

to Illuminated Cloud General Discussion

Brooks if you need to actively develop your stylesheet alongside your VF page, you can just create a second VF page for that with a contentType of 'text/CSS' and include the <apex:stylesheet> tag with a URLFOR reference to your "scratch" CSS VF page. Once your CSS is stable, then you can migrate it from the VF page to a static resource.

Reply all

Reply to author

Forward