Sunday, June 8, 2014

Adding a Bootstrap (v3) and Fontawesome (v4) base page

Want a good "base" to start off with building your own design?

Here is a sample page with the latest version of Bootstrap and Font Awesome- that makes your page responsive and thus act nice on any device!

 Since this page has its own references to Bootstrap and Font Awesome, you need to turn off the "out of the box" support that comes with all Cloud App Studio components.

 In the "More..." menu, click "Page Properties":



 Here uncheck the "Show with Application Layout":


















Now Cloud App Studio will not render anything - it is just your code and no other code that will create your page (well, ok some http-headers is sent with you page...)

 Paste the following code to the Page and you should be just fine:

 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

     <title>Base page</title>
      
<!-- Core Scripts - Include with every page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>      
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- Font awesome -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

 <script> 
  $(document).keypress(function(e) {
  if(e.which == 13) {
    alert("Hittin Enter: " + $('#searchBar').val());
    
    // enter pressed
  }
});
</script>
  
<style>
/*Adding margin to the progress bar in nav profile drop down*/
.progress
{
  margin:0px 14px 0px 14px;
}

 .panel-heading 
{
padding-left:15px;
  margin:0px -15px 0px -15px;
}
    
</style>
  
</head>
  
<body>
  
    <!-- Static navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>

          
<ul class="nav navbar-nav navbar-right">
          <form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <i class="fa fa-search"></i> <input type="text" id="searchBar" class="form-control" placeholder="Search">
  </div>
          
<!--   <button type="submit" class="btn btn-default">Submit</button> -->
</form>
        <li><a href="#"><i class="fa fa-envelope"></i> Messages <span class="badge alert-info">42</span></a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> Profile <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li>
              <a href="#">Space used</a>
              
              <div class="progress progress-striped active">
               <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr">60%</span>
    </div>
              </div>
          
            </li>
            
            <li class="divider"></li>
            
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Log out</a></li>
          </ul>
        </li>
      </ul>
            
        </div><!--/.nav-collapse -->
      </div>
    </div>  
      <!--/Navigation -->
       
      <div class="container">
        <div style="margin-top:60px;"></div>
<!-- Alert -->
<div class="alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
        
<!--/alert-->        
        
        <div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>
       
        
<div class="row">

   <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
    
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>    

     

  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>    

 </div>
        
<!-- Media list example -->
<ul class="media-list">
      <li class="media">
        <a class="pull-left" href="#">
          <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjZWVlIi8+PHRleHQgdGV4dC1hbmNob3I9Im1pZGRsZSIgeD0iMzIiIHk9IjMyIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9zdmc+" style="width: 64px; height: 64px;">
        </a>
        <div class="media-body">
          <h4 class="media-heading">Media heading</h4>
          <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
          <!-- Nested media object -->
          <div class="media">
            <a class="pull-left" href="#">
              <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjZWVlIi8+PHRleHQgdGV4dC1hbmNob3I9Im1pZGRsZSIgeD0iMzIiIHk9IjMyIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9zdmc+" style="width: 64px; height: 64px;">
            </a>
            <div class="media-body">
              <h4 class="media-heading">Nested media heading</h4>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
              <!-- Nested media object -->
              <div class="media">
                <a class="pull-left" href="#">
                  <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjZWVlIi8+PHRleHQgdGV4dC1hbmNob3I9Im1pZGRsZSIgeD0iMzIiIHk9IjMyIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9zdmc+" style="width: 64px; height: 64px;">
                </a>
                <div class="media-body">
                  <h4 class="media-heading">Nested media heading</h4>
                  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                </div>
              </div>
            </div>
          </div>
          <!-- Nested media object -->
          <div class="media">
            <a class="pull-left" href="#">
              <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjZWVlIi8+PHRleHQgdGV4dC1hbmNob3I9Im1pZGRsZSIgeD0iMzIiIHk9IjMyIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9zdmc+" style="width: 64px; height: 64px;">
            </a>
            <div class="media-body">
              <h4 class="media-heading">Nested media heading</h4>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
            </div>
          </div>
        </div>
      </li>
      <li class="media">
        <a class="pull-right" href="#">
          <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjZWVlIi8+PHRleHQgdGV4dC1hbmNob3I9Im1pZGRsZSIgeD0iMzIiIHk9IjMyIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9zdmc+" style="width: 64px; height: 64px;">
        </a>
        <div class="media-body">
          <h4 class="media-heading">Media heading</h4>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
        </div>
      </li>
    </ul>  
<!-- /Media list example -->    

             
<!-- list group -->            
 <div class="list-group col-sm-6 col-md-4">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
<!-- /list group -->


 <!-- list group items -->            
<div class="list-group col-sm-6 col-md-4">
<a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
      </a>

 <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
      </a>  
<a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
      </a>  
</div>
<!--/list group items-->

 <!-- panel -->            
<div class="panel panel-primary col-sm-6 col-md-4">
      <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>
<!-- /panel -->

</div>
</body>
</html>
Posted by at No comments:

Saturday, June 7, 2014

Agenda sneak-preview

Latest from the Lab

Letting you see the latest about to be released - being able to render a view in an "Agenda"-format.

Once being released, you create a View and change its properties to render as "Agenda", sort the view as you wish - first column will be the date the Agenda renders on - and that's it. 
Lets say you have an "Issue Tracker" app, you probably want to render the content based on the "Creation Date", rather then a custom Field - from your Form - like if you have a Calendar of Events (which will then render on the date of the Event.

From a design perspective we render "passed date", "current date" and "future dates" differently. How they will render depends on what Theme you have selected.


This is what the Agenda will look like from a Design perspective - just a different way to render you data.


An example of what an Application might look like using the Agenda formatting


We also have thoughts about rendering the complete Calendar to be able to see where data is missing - could be used in "Time Report" applications to make it easy to see where reports are missing.


Hopefully we can have this released within a few weeks time.

Stay tuned!
Posted by at No comments:

All our custom themes - this is what your application can look like!

Themes - controling the look and feel of you web application

In Cloud App Studio you use the Theme selection to set fonts and colors to your application.
10 different themes comes with the Free Edition of Cloud App Studio. As a Premium User you can develop your own themes to add the logo of your Company and support your Corporate guidelines when it comes to branding.

You have a preview of the Theme you choose - this is to be found under "App Settings"

RESPONSIVE, not just fonts and colors
A theme is "responsive", which means that no matter what device you use to access you web application it will be optimized to the resolution of the screen: phones, tablets and desktops is automatically supported our of the box.

Here you see all themes we've included in the Free edition of Cloud App Studio:











Posted by at No comments:

Cloud App Studio in a nutshell

Use Cloud App Studio to create Form based web applications.

This basically means that Cloud App Studio is best suited for applications when you need to persist (store) data and collaborate around it.

FORMS - to store data you need something that allows you to input your data. With the simple Form builder, you drag and drop you fields into the Free Form work space with live preview; you see where you fields will be positioned as you drag them around!


Creating a custom view is done directly from the Form:


 VIEWS - Whenever you have created a Form for input, you need a tool that allows you to view the submitted data. Directly from your Form you create your Views (by default we create a View for you that contains all fields from you Form).
Here you add the fields you want to present to your users by dragging the columns in desired order.


 You can easily activate filtering of data for your users as well as create static or dynamic selections of you data, such as only showing data where you have a status field presenting "new", "open", or "closed" cases in you "Issue tracker" application. The dynamic features allows you to only show data that has been created by the logged in user.
Activate Filtering for your Columns

Add View selection to target the data being presented to you Users - here we only show data created by "you" (the current User)

Changing the Look and Feel
THEMES - Cloud App Studio provides 10 different - responsive - "Themes". This means that all your apps works as good in you mobile devices (Phones, Tablets), as well as you Laptops. If this is not enough, as a Premium user you can create your own Themes to support your Corporate Branding Guidelines.




All Templates that you can rocket-off with, can be fully customized, all at your finger tips - with, or without programming skills.

 PAGE - For you web developers out there, we also have the Page component in which you can write your own code (html, css, javascript and xml) in our editor. You can mix your code with injecting our components to lower development effort.

 We also have an API which can be used to create custom functionality to suite your needs and requirements. Check it out!

 NEED ASSISTANCE?
If you don't want to do this your self, we and our Partners around the Globe, can help you build your web applications.
Cloud App Studio is the tool of the future with our goal to make web development as easy as writing your blog posts.
All you need is a browser and the Cloud.


Posted by at No comments:

New interface!

Cloud App Studio interface 2014-06
Posted by at No comments:

Monday, April 29, 2013

Adding Cloud App Studio Forms into Google Sites



Some good news. We have just cracked the code on how to embed Cloud App Studio-based Forms.
A bit technical, but I think you could manage it :-)

Some pre-req's:
How to create the widget
1. App settings: make sure that users ("Anyone") have at least "Contributor" access
2. Copy this sample code into a "Page", which you can call "widget.xml" (don't really think it matters what you call it):

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Cloud App Studio - Embedded Form Sample" />
<Content type="html"><![CDATA[
{{injected form-code here}}
]]></Content>
</Module>

3. Replace "{{injected form-code here}}" with the Form you want to embed into your Google Sites page
4. Add the domain (//cloudappstudio.appspot.com) to the "Inject Forms" code, which could look something like this:

<script type='text/javascript' src='//cloudappstudio.appspot.com/app/@context("app","name")/inject-form/fu680xcs?style=basic'></script>

4. Uncheck the Page-More-setting "Show with Application Layout"
5. Save the page (alt-s) and Open it (alt-o).
6. Copy the url to the page, which just displays some weird characters: ]]> (which is correct..)

Now you are ready to add your widget into your Google Sites page:
1 In edit-mode: "Insert" -> " ...More Gadgets" (bottom of first column)
2. Click "Add gadget by URL" and paste your url (to your page)
3. Preview the added gadget, modify display settings (optional) and click "ok", when done.
4. Save your Page and you're done. 

Take a look at this Tutorial and see if it helps:
Posted by at No comments:

Friday, January 25, 2013

Rename your submit buttons

Currently you never add a submit button to a Form in Cloud App Studio - it is always there and is always just a plain submit without any value (=label on the button).

This means it will take the locale settings from your browser and set value to "submit" or what is set the corresponding value for your language.

Until properties for a submit button is added to the Form builder, you can use a page with your Form being embedded and add the following code:

First you need to make sure jquery and jqueryUIis part of your form.
Secondly add the Form (embedded).
And last add the last script tag and modify the value of the "label"


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js" type="text/javascript"></script>

 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/ui-lightness/jquery-ui.css" type="text/css" />

 <script type='text/javascript' src='/app/@context("app","name")/inject-form/fu680xcs?style=basic'></script> 

  
<script>
  //Check if form is loaded every second, when loaded rename submit button to skicka
  function renameSubmitButton(){
  if($(".amantech-se-inject-form > input[type=submit]").size() == 0){
  setTimeout(renameSubmitButton, 1000);  
  }
    else{

          $(".amantech-se-inject-form > input[type=submit]").val("This is the new label on your submit button");
    }
  }
  renameSubmitButton();
</script>
Posted by at No comments:
Subscribe to: Posts (Atom)