get value checkbox in zk - zk

i have a grid with list checkbox
<div height="200px">
<grid id ="actListBox" model="#bind(vm.actions)" >
<template name="model">
<row style=" width:200px !important; ">
<cell rowspan="5" align="left" >
<checkbox style="height: 70px; width:1000px; overflow: auto; margin-left:10px;"
label="${each.action_name}" id ="${each.actionid}" value ="${each.actionid}" />
</cell>
</row>
</template>
</grid>
<span>
<checkbox label="Check all" value ="checkall" id="chkAll"/>
</span>
</div>
and now i want get all value of checkbox but i can't found anyway
please help me
thanks all

You can in your composer get checked Ids by iterating over actions:
#Command
public void checkedIds(final Event e){
final StringBuilder builder = new StringBuilder("Checked Ids: ");
for (final Action action : actions) {
if (action.getChecked()) {
builder.append(action.getId()).append(' ');
}
}
Messagebox.show(builder.toString());
}
I updated the ZK fiddle.

Related

How to Save selected radio button value into custom object from Visualforce page

Need to save the selected radio button value into custom object.
enter image description here
`
If I select "Excellent" radio button and click submit button. Need to save Excellent value into custom object. But my code is not save the value into custom object. Below is my code and please suggest where i am doing wrong.
VF Code:
<apex:page controller="RadioBtn_table_Apex" showHeader="false" applyHtmlTag="true" applyBodyTag="false">
<style>
.fswrapper{
width:800px;
margin:0 auto;
border:3CCF4E 30px;
}
.headerTitle
{
font-family:arial,sans-serif;
font-size:16px;
font-weight:600;
color: #fff!important;
text-align:left;
text-transform:UPPERCASE;
background:#4e75a3;
Padding:10px;
display:block;
margin:0;
}
input[type=radio] {margin-left: 40px;}
.radioClass {margin-left: 5%;}
.big {line-height: 2.8;}
</style>
<apex:form styleClass="fswrapper" id="frm">
<head>
<apex:slds />
</head>
<center>
<img src="{!$Resource.ForceDotCom}"/>
</center>
<apex:pageBlock >
<h1 class="headerTitle"> Application Feedback </h1>
<apex:pageBlockButtons location="bottom">
<apex:commandButton value="Submit" action="{!savefeedback}" reRender="frm"/>
<apex:commandButton value="Exit" action="{!feedbackexit}" reRender="frm"/>
</apex:pageBlockButtons>
<apex:actionRegion >
<Table width="100%" border="0" cellpadding="0" cellspacing="0" columns="0" >
<tr >
<td colspan="5" class="fieldLabel">
<p style="font-size: 20px;">
<b> How likely are you with our Application </b>
</p>
<!--<apex:selectRadio id="selectRb" value="{!selectedAnswer}" immediate="true"> -->
<apex:selectRadio id="selectRb" value="{!ratobj.Application_Rating__c}">
<apex:selectOption value="{!items}"/>
</apex:selectRadio>
</td>
</tr>
</Table>
</apex:actionRegion>
</apex:pageBlock>
</apex:form>
</apex:page>
APEX Code :
public class RadioBtn_table_Apex
{
public RB_Rating__c ratobj{get;set;}
public string SelectedAnswer {get;set;}
public RadioBtn_table_Apex()
{
ratobj = new RB_Rating__c();
}
public pagereference savefeedback()
{
insert ratobj;
return Auth.SessionManagement.FinishLoginflow('/'+ratobj.Id);
}
public List<SelectOption> getItems() {
List<SelectOption> options = new List<SelectOption>();
options.add(new SelectOption('Excellent','Excellent'));
options.add(new SelectOption('Great','Great'));
options.add(new SelectOption('Good','Good'));
options.add(new SelectOption('Medium','Medium'));
options.add(new SelectOption('Poor','Poor'));
options.add(new SelectOption('Very Bad','Very Bad'));
return options;
}
public pagereference feedbackexit()
{
return Auth.SessionManagement.FinishLoginflow('/');
}
}
Please suggest and where i am doing wrong.
Thanks
i am trying to save my selected radio button values into custom object

Is it possible to have two selected classes with different designs on the same page/component?

Svelte has a great tool for define design of classes but is it possible to define two different classes in one component?
I am working on the menu, which is in one component. When the page is reloaded I need to have 'selected' two buttons, one from the main menu and the second from a submenu, but it seems that even if the classes have different names and variables it activates only one of them - the first one. Is it possible to select more classes/active-buttons in one component at the same time?
You can use several class: directives in the same component, on different elements as well as multiple times on a single element.
On a single element, you're allowed to mix & match multiple class: directives with the class= attribute. Svelte will merge the result.
All of this is supported, as demonstrated by the following code (and REPL):
<script>
let name = 'world';
let red = false
let underline = false
let align = "left"
</script>
<p>
<label class:selected={red}>
<input type="checkbox" bind:checked={red} />
Red
</label>
</p>
<p>
<label class:selected={underline}>
<input type="checkbox" bind:checked={underline} />
Underline
</label>
</p>
<p>
Align
<label class:selected={align === "left"}>
<input type="radio" value="left" bind:group={align} />
left
</label>
<label class:selected={align === "center"}>
<input type="radio" value="center" bind:group={align} />
center
</label>
<label class:selected={align === "right"}>
<input type="radio" value="right" bind:group={align} />
right
</label>
</p>
<h1
class="align-{align}"
class:red
class:underline
>
Hello {name}!
</h1>
<style>
.red {
color: red;
}
.underline {
text-decoration: underline;
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
label {
padding: .5em .5em .25em;
}
label.selected {
background: lavender;
}
</style>
Single element with multiple class directives and mixed with class attribute:
<h1
class="align-{align}"
class:red
class:underline
>
Hello {name}!
</h1>
A same class (selected) used on multiple elements:
<p>
<label class:selected={red}>
<input type="checkbox" bind:checked={red} />
Red
</label>
</p>
<p>
<label class:selected={underline}>
<input type="checkbox" bind:checked={underline} />
Underline
</label>
</p>
There must be something else going on in your case (or I didn't understand your question).

Apex Class Extension: Updating related field using standard controller

I am relatively new to Apex:
Im trying to save a related field via my visualforce page, the apex class currently in use returns this error:
Update failed. First exception on row 0 with id 000000000000000; first error: INVALID_ID_FIELD, record id cannot be empty key: []
Error is in expression '{!save}' in component in page masseditcontact: Class.ContactExt.save: line 28, column 1
What I have tried so far is to refer to the field on my visualforce page - Contact.Account.Organization_Size__c - however when I try and update it with the save method in my class it seems to throw the error above.
public class ContactExt {
public Contact record {get; set;}
public String city {
get {
return record.Account.Organization_Size__c;
}
private set;
}
public ContactExt(ApexPages.StandardSetController controller) {
record = (Contact)controller.getRecord();
}
public PageReference save(){
update record
//try{
//update record;
//}
//catch (QueryException e)
//{
//record = new Contact();
//}
return null;
}
}
Visualforce markup
<apex:page standardController="Contact" extensions="ContactExt" recordSetVar="unused" sidebar="true" showHeader="true">
<apex:outputPanel rendered="{!$User.UIThemeDisplayed == 'Theme4d' || contains($CurrentPage.URL, 'lightning.force.com')}">
<apex:stylesheet value="{!URLFOR($Resource.SLDS221, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
<apex:stylesheet value="{!$Resource.MassEditCSS}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</apex:outputPanel>
<apex:includeScript value="{!$Resource.UtilJS}" />
<apex:includeScript value="{!$Resource.LightningMassEditJS}" />
<apex:includeScript value="support/api/42.0/interaction.js"/>
<apex:includeScript value="support/console/42.0/integration.js"/>
<div class="mass-update-mass-edit" id="mass-update-mass-edit">
<div role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open" id="cancel-modal">
<div class="slds-modal__container">
<div class="slds-modal__header">
<button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="closeCancelModal();">
<svg class="slds-button__icon slds-button__icon--large" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS221, '/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>
</svg>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="header43" class="slds-text-heading--medium">Return</h2>
</div>
<div class="slds-modal__content slds-p-around--medium">
<p>Are you sure you wish to return?</p>
</div>
<div class="slds-modal__footer">
<button class="slds-button slds-button--neutral" onclick="closeCancelModal();">No</button>
<button class="slds-button slds-button--brand" onclick="goBack();">Yes</button>
</div>
</div>
</div>
<div class="slds-backdrop slds-backdrop--open" id="cancel-modal-backdrop"></div>
<apex:form >
<apex:pageBlock >
<apex:pageMessages />
<apex:pageBlock >
Note: All modifications made on the page will be lost if Return button is clicked without clicking the Save button first.
</apex:pageBlock>
<apex:pageBlockButtons >
<apex:outputPanel rendered="{!$User.UIThemeDisplayed == 'Theme4d' || contains($CurrentPage.URL, 'lightning.force.com')}">
<apex:commandButton value="Save" action="{!save}" status="lightningSavingStatus" reRender="table" styleClass="slds-button slds-button--neutral slds-button--brand" />
<apex:commandButton value="Return" onclick="openCancelModal();" styleClass="slds-button slds-button--neutral" reRender="table" />
<apex:actionStatus id="lightningSavingStatus" >
<apex:facet name="start" >
<div id="spinning" class="slds-spinner_container">
<div class="slds-spinner--brand slds-spinner slds-spinner--medium" role="alert">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</apex:facet>
</apex:actionStatus>
</apex:outputPanel>
<apex:outputPanel rendered="{!$User.UIThemeDisplayed != 'Theme4d' && !contains($CurrentPage.URL, 'lightning.force.com')}">
<apex:commandButton value="Save" action="{!save}" status="savingStatus" reRender="table" />
<apex:commandButton value="Return" action="{!cancel}" onclick="return confirmCancel()" />
<apex:actionStatus id="savingStatus" >
<apex:facet name="start" >
<img src="/img/loading.gif" />
</apex:facet>
</apex:actionStatus>
</apex:outputPanel>
</apex:pageBlockButtons>
<apex:pageBlockTable value="{!selected}" var="a" id="table">
<apex:column headerValue="Name">
<apex:inputField value="{!a.Name}"/>
</apex:column>
<apex:column headerValue="Phone">
<support:clickToDial number="{!a.Phone}" entityId="{!a.Id}"/>
</apex:column>
<apex:column headerValue="Mobile Phone">
<apex:inputField value="{!a.MobilePhone}"/>
</apex:column>
<apex:column headerValue="Email">
<apex:inputField value="{!a.Email}"/>
</apex:column>
<apex:column headerValue="Title">
<apex:inputField value="{!a.Title}"/>
</apex:column>
<apex:column headerValue="Account">
<apex:inputField value="{!a.AccountId}"/>
</apex:column>
<apex:column headerValue="Description">
<apex:inputField value="{!a.Description}"/>
</apex:column>
<apex:column headerValue="Organisation Size">
<apex:inputField value="{!a.Organization_Size__c}"/>
</apex:column>
<apex:column headerValue="Organisation Size">
<apex:inputField value="{!a.Account.Organization_Size__c}"/>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</div>

CX JS - Inserting html to title property of window

Is it possible to insert html content to the title of a window component in CX instead of a string? I need to customise the contents of my window title.
It is. Here is an example on how to put additional buttons in the header:
import { Button, FlexRow, Heading, HtmlElement, Window } from "cx/widgets";
export const App = (
<cx>
<div>
<Window bodyStyle="padding: 1rem">
<FlexRow putInto="header" spacing align="center">
<Heading level={4}>My Title</Heading>
<div style="flex: 1" />
<Button mod="hollow" icon="search" />
</FlexRow>
Window Contents
</Window>
</div>
</cx>
);
https://fiddle.cxjs.io/?f=oydjHF84
Another option is to use the header property. This way you can also create custom content placeholders within the header:
<Window
header={(
<cx>
<FlexRow align="center" style="width: 100%;">
<span>Title</span>
<div style="flex: 1 1 0%" />
<ContentPlaceholder name="header-tools" />
</FlexRow>
</cx>
)}
>
<LookupField
putInto="header-tools"
style="width: 220px;"
mod="header-tool"
value-bind="classificationId"
options-bind="classifications"
/>
Window content
</Window>

Check only one checkbox and uncheck previous checked checkbox

I wanted that when I change my selection in my checkbox the only selected checkbox will be selected and the previous selected checkbox will be uncheck.
My code is working but i really wanted to select only one checkbox.
In my view.
<center><table></center>
<tr>
<th><center>
List of Names</center></th>
<th colspan="3">
Actions
</th></tr>
<tr ng-repeat="role in roles">
<td>
<label>
<ion-checkbox ng-model="isChecked" ng-
change="format(isChecked,role,$index)"
ng-init="isChecked=false"><div class="wew">
{{role}}
</div></ion-checkbox>
</label>
</td>
<td>
<button ng-hide="!isChecked" ng-click="present()">P </button> </td>
<td>
<button ng-hide="!isChecked" ng-click="late()">L</button></td>
<td><button ng-hide="!isChecked" ng-click="absentss()">A</button></td>
<td><button ng-hide="!isChecked" ng-click="delete()">D</button></td>
</tr> </table>
And I think in my controller is the part where i need to change my codes to achieved the correct result.
$scope.isChecked = false;
$scope.selected = [];
$scope.format = function (isChecked, role, index) {
if (isChecked==true) {
$scope.selected.push(role);
}
else {
var _index = $scope.selected.indexOf(role);
$scope.selected.splice(_index, 1);
}
var students = $scope.selected;
console.log(students);
for( var s=0; s<students.length; s++) {
$scope.stud = [
students[s]
]
};
Thank you in advanced! I hope that someone can help in this matter.
Checkboxes are for multiple selections within a group.
Use radio buttons instead.
Example With AngularJs
This is way you can also implement.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('app', []).controller('appc', ['$scope',
function($scope) {
$scope.selected = 'other'; //default selection
}
]);
</script>
</head>
<body ng-app="app" ng-controller="appc">
<label>SELECTED: {{selected}}</label>
<div>
<input type="checkbox" ng-checked="selected=='male'" ng-true-value="'male'" ng-model="selected">Male
<br>
<input type="checkbox" ng-checked="selected=='female'" ng-true-value="'female'" ng-model="selected">Female
<br>
<input type="checkbox" ng-checked="selected=='other'" ng-true-value="'other'" ng-model="selected">Other
</div>
</body>
</html>