Implementing User Options like Choose CM Options

I am working on a user option dialog where they can pick and choose some values[logged_in_group to start with]

I have created placeholder properties in Core_GlobalLayout for this. Get_IdentityMembership_Details and Get_AllGroups_Details works fine, GetStoredValueForGroup(The users that do not have a preference created for their identity, I am mapping to World) works too. But I have 2 issues : 

- The dropdown in my UI Form is not resizing based on values added, its defined as static inside a Group Box, with x and y co-ordinates as 0,0. But without Group Box too I could not make it hold to a fixed width.

CSS for the dropdown:

{$this field rule} .sys_f_label_container
{
width: 110px;
}

{$this field rule}
{
margin: 5px 0px 5px 0px;
}

{$this field rule} select
{
width: 110px;
}

- After user selects the value, I am not able to capture it. I have a ChooseUserOptionsDialog.prototype.SaveUISelection function, but how to capture the value coming from UI here?

=================================

Below is the code for this form onLoad

ChooseUserOptionsDialog = function ()
{
var inn = new Innovator();
var userid = inn.getUserID();

var logged_in_group = getFieldComponentByName("logged_in_group");
var listGroupsDropDown = [];

document.isEditMode = true;

var body = "<sessionuser>" + userid + "</sessionuser>";
var res = aras.applyMethod("Get_IdentityMembership_Details",body);

var resItem = aras.IomInnovator.newItem(); // Create a new empty item
resItem.loadAML(res); // and then load in the string returned from aras.applyMethod

if (resItem.isError()) {
aras.AlertError(resItem);
return null;
}
if (resItem.getItemCount() <= 0)
{
//let user choose any group if he does not belong to any group
var resu = aras.applyMethod("Get_AllGroups_Details");
resItem.loadAML(resu); //and then load in the string returned from aras.applyMethod

if (resItem.isError()) {
aras.AlertError(resItem);
return null;
}
}

var storedValue = this.GetStoredValueForGroup(userid);//gets existing value from db
var index = 0;

if (resItem.getItemCount() === 0)
{
//do something for no return
}
else
{
for (var i=0;i<resItem.getItemCount();i++)
{
var currentItem = resItem.getItemByIndex(i);
listGroupsDropDown.push({label: currentItem.getProperty("keyed_name"), value: currentItem.getProperty("id")});

if (currentItem.getProperty("id") === storedValue)
{
index = i;
}
}
}de
logged_in_group.component.setState({
list: listGroupsDropDown,
value : listGroupsDropDown[index].value
});
};

================================

Below is the code for Ok button

ChooseUserOptionsDialog.prototype.ApplyChanges = function ChooseUserOptionsDialog_ApplyChanges()
{
this.SaveUISelection();
top.main.tree.updateTree();
parent.args.dialog.close();
};

ChooseUserOptionsDialog.prototype.SaveUISelection = function ChooseUserOptionsDialog_SaveUISelection()
{
debugger;
var inn = new Innovator();
var userid = inn.getUserID();

var groupComponent = getFieldComponentByName("logged_in_group", "");
var userSelectionGroup = groupComponent.value;//Value not getting retrived

var body = "<sessionuser>" + userid + "</sessionuser>";
body = body+ "<usergroup>" + userSelectionGroup + "</usergroup>";
var res = aras.applyMethod("Set_UpdateUserPreference",body);

var resItem = aras.IomInnovator.newItem(); // Create a new empty item
resItem.loadAML(res); // and then load in the string returned from aras.applyMethod

if (resItem.isError()) {
aras.AlertError(resItem);
return null;
}
};